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

xe55xuns 于 2023-01-27 发布在 TypeScript

关注(0)|答案(3)|浏览(162)

'我在Angular html文件中这样做：

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

现在错误是：错误：源代码/应用程序/部门/显示部门/显示部门组件。html：23：31-错误NG8002：无法绑定到"dep"，因为它不是"app-add-edit-dep'"的已知属性。
1.如果"app-add-edit-dep"是一个Angular 组件，并且它有"dep"输入，则验证它是否是此模块的一部分。your text
1.如果"app-add-edit-dep"是一个Web组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的"@NgModule. schemas "中以禁止显示此消息。
1.若要允许任何属性，请将"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;
    });
  }

}

typescript

来源：https://stackoverflow.com/questions/75200392/cant-bind-to-a-propery-since-it-isnt-a-known-property-of-a-specific-component

3条答案

按热度按时间

qvk1mo1f1#

Angular给出的错误概括了最可能的原因。可能是您没有导入AddEditDepComponent（或类似名称）到您声明ShowDepComponent的模块中。根据消息，也可能是dep输入没有声明-或者是因为您错过了Input()装饰器，或者是因为它根本就不存在于这个类中

赞(0）回复(0）举报 2023-01-27

cedebl8k2#

您需要确保您的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 {
  }

}

赞(0）回复(0）举报 2023-01-27

qqrboqgw3#

在add-edit-dep组件中缺少带有装饰器@Input（）的属性“dep”
输入documentation。

赞(0）回复(0）举报 2023-01-27