错误 NG8002：无法绑定到 'user'，因为它不是 'app-add-edit-box' 的已知 属性 & 组件 ShowBoxComponent 的模板中发生错误

Question

这是我在尝试加载 angular 服务器时从终端收到的确切错误。作为一些附加信息，当我打开本地主机页面时，它显示“无法获取 /box”。

Error: src/app/box/show-box/show-box.component.html:23:28 - error NG8002: Can't bind to 'box' since it isn't a known property of 'app-add-edit-box'.
1. If 'app-add-edit-box' is an Angular component and it has 'box' input, then verify that it is part of this module.
2. If 'app-add-edit-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.


23         <app-add-edit-box [box]="box" *ngIf="ActivateAddEditBoxComp"></app-add-edit-box>
                              ~~~~~~~~~~~~~

  src/app/user/show-box/show-box.component.ts:6:16
    6   templateUrl: './show-box.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ShowBoxComponent.

我是 angular 的新手，我不确定如何解决此错误。在我的 show.component.html 文件中，我有如下所示的内容，它取自 bootstrap 模态。

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
        <button type="button" class="close"
          data-dismiss="modal" aria-label="Close"
          (click)="closeClick()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <app-add-edit-box [box]="box" *ngIf="ActivateAddEditBoxComp"></app-add-edit-box>
      </div>
    </div>
  </div>
</div>

这是我 show.component.ts

中的内容

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/shared.service';

@Component({
  selector: 'app-show-box',
  templateUrl: './show-box.component.html',
  styleUrls: ['./show-box.component.css']
})
export class ShowUserComponent implements OnInit {

  constructor(private service:SharedService) { }

  BoxList:any=[];

  ModalTitle:string;
  ActivateAddEditBoxComp:boolean=false;
  box:any;

  ngOnInit(): void {
    this.refreshBoxList();
  }

  addClick(){
    this.box={
      BoxId:0,
      Box1:"",
      Box2:"",
    }
    this.ModalTitle="Add Box";
    this.ActivateAddEditBoxComp=true;
  }

  closeClick(){
    this.ActivateAddEditBoxComp=false;
    this.refreshBoxList();
  }

  refreshBoxList(){
    this.service.getBoxList().subscribe(data=>{
      this.BoxList=data;
    })
  }

}

这是我的添加-编辑-box.ts 文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-add-edit-box',
  templateUrl: './add-edit-box.component.html',
  styleUrls: ['./add-edit-box.component.css']
})
export class AddEditBoxComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Answer 1

根据Configuring the parent component，

<app-add-edit-box [box]="box" *ngIf="ActivateAddEditBoxComp"></app-add-edit-box>

[box] 是父组件的 属性 绑定，用于将数据传递给子组件。

错误

Error: src/app/box/show-box/show-box.component.html:23:28 - error NG8002: Can't bind to 'box' since it isn't a known property of 'app-add-edit-box'.

1. If 'app-add-edit-box' is an Angular component and it has 'box' input, then verify that it is part of this module. ...

根据您附加的源代码和错误消息，您缺少 box 的 Input() 装饰器。

---

解决方案

在您的 AddEditBoxComponent 中，您需要为 box 声明 Input decorator 以从父组件接收值。

已编辑：不要忘记在 @angular/core 导入中添加 Input。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-add-edit-box',
  templateUrl: './add-edit-box.component.html',
  styleUrls: ['./add-edit-box.component.css']
})
export class AddEditBoxComponent implements OnInit {
  @Input() box: any; // Use any or class type

  constructor() { }

  ngOnInit(): void {
  }

}