无法绑定到属性，因为它不是特定组件的已知属性答案

【问题标题】：Can't bind to a propery since it isn't a known property of a specific component无法绑定到属性，因为它不是特定组件的已知属性
【发布时间】：2023-02-01 11:28:01
【问题描述】：

`我在 Angular html 文件中做了这个：


    <div class="modal-body">
     <app-add-edit-dep [dep]="dep" *ngIf="ActivateAddEditDepComp">
     </app-add-edit-dep>
    </div>

现在错误是：错误：src/app/department/show-dep/show-dep.component.html:23:31 - 错误 NG8002：无法绑定到“dep”，因为它不是“app-add-edit-dep”的已知属性。

如果“app-add-edit-dep”是一个 Angular 组件并且它有“dep”输入，那么验证它是这个模块的一部分。 your text
如果“app-add-edit-dep”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。

要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。

这是 Angular 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=[];

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

  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;
    });
  }

}

【问题讨论】：

标签： angular typescript data-binding two-way-binding

【解决方案1】：

Angular 给你的错误概述了最可能的原因。可能是您没有将 AddEditDepComponent（或类似名称）导入到您声明 ShowDepComponent 的模块中。根据消息，也可能是未声明 dep 输入 - 要么是因为您错过了 Input() 装饰器，要么是因为它根本不作为该类的专有项存在。

【讨论】：

嗨，我添加了 @Input() dep: any;在 app-add-edit-dep 中，但错误仍然存在。

【解决方案2】：

您需要确保您的 app-add-edit-dep 已在 app.module.ts（或另一个需要的 *.module.ts）中声明。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ShowDepComponent } from './show-dep/show-dep.component';
import { AddEditDepComponent } from './add-edit-dep/add-edit-dep.component';


@NgModule({
  declarations: [
    AppComponent,
    ShowDepComponent,
    AddEditDepComponent,

  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第二个原因，可能是 app-add-edit-dep 的“dep”属性没有 @Input() 注解，比如

import { Component, Input, 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 {

  @Input()
  dep: any;

  constructor() { }

  ngOnInit(): void {
  }

}

【讨论】：

嗨，谢谢你 Nikita 的回复，但是 - @Input() dep: any;不幸的是不适合我。如果不打扰您，还有其他解决方案吗..
你好@sarangish 你能分享 app-add-edit-dep 组件代码来帮助你吗
hai Nikita，如果您要询问 app-add-edit-dep TS 组件，它与您在上面回答的代码相同（第二个）。 - @sarangish
@sarangish 你能告诉你，你的项目有多少个 *.module.ts 吗？如果有多个，问题可能与模块没有正确导入（或导出）有关
只有一个 app.module.ts..

【解决方案3】：

您在带有装饰器 @Input() 的 add-edit-dep 组件中缺少属性“dep”

输入documentation。

【讨论】：

您好，感谢您的回复，但并没有解决问题。我在终端错误面板中看到了这个建议——“要允许任何属性将‘NO_ERRORS_SCHEMA’添加到该组件的‘@NgModule.schemas’。”这是一个好主意吗？

【解决方案4】：

我正在做同样的教程。您只需在 add-edit-dep.components.ts 中声明

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

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

 @Input() dep:any;   <------ THIS WOULD ENABLE TO RUN THE APP

}

【讨论】：