Angular 10 错误 NG8002 无法绑定对象

Question

每当我将以下代码行添加到 .html 文件时，我都会收到以下错误：

错误：src/app/department/show-dep/show-dep.component.html:22:11 - 错误 NG8002：无法绑定到“dep”，因为它不是 'app-add-edit-dep'。

1. 如果“app-add-edit-dep”是一个 Angular 组件并且它有“dep”输入，那么验证它是这个模块的一部分。
2. 如果“app-add-edit-dep”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 禁止显示此消息。
3. 要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。

22 [dep]="dep" *ngIf="ActivateAddEditDepComp"> ~~~~~~~~~~~

src/app/department/show-dep/show-dep.component.ts:6:16 6 templateUrl: './show-dep.component.html', ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ 组件 ShowDepComponent 的模板出错。

<app-add-edit-dep
   [dep]="dep" *ngIf="ActivateAddEditDepComp">
</app-add-edit-dep>

在我添加这一行之前，一切都很好。我将一个部门对象传递给我的 add-edit-department 组件，以便它知道是否需要添加新部门或编辑现有部门。我已经包含了我所做的涉及相关部门对象的所有工作。

show-dep.component.html

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary float-right m-2" 
data-bs-toggle="modal" data-bs-target="#exampleModal"
(click)="addClick()"
data-backdrop="static" data-keyboard="false">
  Add Department
</button>

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

<table class = "table table-striped"> 
    <thead>
        <tr>
            <th>DepartmentID</th>
            <th>Department Name</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor = "let dataItem of DepartmentList">
            <td>{{dataItem.DepartmentID}}</td>
            <td>{{dataItem.DepartmentName}}</td>
            <td>
                <button type="button" class = "btn btn-light mr-1">
                    Edit
                </button>
                <button type="button" class = "btn btn-light mr-1">
                    Delete
                </button>
            </td>
        </tr>
    </tbody>

</table>

show-dep.component.ts

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

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

  constructor(private service:SharedService) { }

  DepartmentList:any=[];

  ModalTitle:string | undefined;
  ActivateAddEditDepComp:boolean = false;
  dep:any;

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

  addClick() {
    this.dep = {
      DepartmentId:0,
      DepartmentName:""
    }
    this.ModalTitle = "Add Department";
    this.ActivateAddEditDepComp = true;
  }

  closeClick() {
    this.ActivateAddEditDepComp = false;
    this.refreshDepList();
  }

  refreshDepList(){
    this.service.getDepList().subscribe(data=>{
      this.DepartmentList=data;
    });
  }

}

add-edit-dep.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

编辑：我在下面添加了 app.module.ts。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DepartmentComponent } from './department/department.component';
import { ShowDepComponent } from './department/show-dep/show-dep.component';
import { AddEditDepComponent } from './department/add-edit-dep/add-edit-dep.component';
import { EmployeeComponent } from './employee/employee.component';
import { ShowEmpComponent } from './employee/show-emp/show-emp.component';
import { AddEditEmpComponent } from './employee/add-edit-emp/add-edit-emp.component';
import { SharedService } from './shared.service';

import {HttpClientModule} from '@angular/common/http';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    DepartmentComponent,
    ShowDepComponent,
    AddEditDepComponent,
    EmployeeComponent,
    ShowEmpComponent,
    AddEditEmpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [SharedService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

可以快速解决您的问题。只需在 declarations 数组之前添加 schemas: [CUSTOM_ELEMENTS_SCHEMA]。理想情况下，您的应用程序应该识别 app-add-edit-dep 元素，因为该组件已在 declarations 数组中声明。事实上，根据给定的信息，这是我现在能想到的唯一解决方案。