Angular2 RC5：无法绑定到“属性 X”，因为它不是“子组件”的已知属性

Posted 2023-02-22

【中文标题】Angular2 RC5：无法绑定到“属性 X”，因为它不是“子组件”的已知属性

【英文标题】：Angular2 RC5: Can't bind to 'Property X' since it isn't a known property of 'Child Component'

【发布时间】：2016-12-21 22:58:47

【问题描述】：

我有一个基于 Angular2 Seed 项目的小型 Angular2 项目，我正在尝试升级到 Angular2 RC5。

我的项目有一些功能，其中之一称为home。 Home 组件使用一个名为create-report-card-form 的子组件。我已经在 home.module 中声明了 home 和 create-report-card-form 组件（参见下面的代码）并得到这个错误：

未处理的 Promise 拒绝：模板解析错误：无法绑定到 'currentReportCardCount' 因为它不是 '创建报告卡表格'。

如果“create-report-card-form”是一个 Angular 组件并且它具有 'currentReportCardCount' 输入，然后验证它是该模块的一部分。

项目结构

-app
    - app.module.ts
    - app.component.ts
    - +home
        - home.module.ts 
        - home.component.ts
        - home.component.html
        - create-report-card-form.component.ts
        - create-report-card-form.component.html
    - +<other "features">
    - shared
        - shared.module.ts

home.module

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import ReactiveFormsModule from '@angular/forms';

import  SharedModule  from '../shared/shared.module';
import  DataService  from '../shared/services/index';
import  HomeComponent  from './home.component';
import  CreateReportCardFormComponent  from './create-report-card-form.component';

@NgModule(
    imports: [CommonModule, SharedModule, ReactiveFormsModule],
    declarations: [HomeComponent, CreateReportCardFormComponent],
    exports: [HomeComponent, CreateReportCardFormComponent],
    providers: [DataService]
)

export class HomeModule  

app.module

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  APP_BASE_HREF  from '@angular/common';
import  RouterModule  from '@angular/router';
import  HttpModule  from '@angular/http';
import  AppComponent  from './app.component';
import  routes  from './app.routes';

import  AboutModule  from './+about/about.module';
import  HomeModule  from './+home/home.module';
import TestModule from './+test/test.module';
import VoteDataEntryModule from './+vote-data-entry/vote-data-entry.module';
import  SharedModule  from './shared/shared.module';

@NgModule(
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), AboutModule, HomeModule,
    TestModule, VoteDataEntryModule, SharedModule.forRoot()],
  declarations: [AppComponent],
  providers: [
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  ],
  bootstrap: [AppComponent]

)

export class AppModule  

create-report-card-form.component.ts

import  Component, Input, Output, EventEmitter, OnInit from '@angular/core';
import  FormBuilder, FormGroup, FormControl  from '@angular/forms';
// import  Dialog, Dropdown, SelectItem, Header, Footer, Messages, Message  from 'primeng/primeng';
import  SelectItem, Message  from 'primeng/primeng';

import ReportCard, ReportCardDataSource from '../shared/index';
import CREATE_REPORT_CARD_FORM_HEADING, EDIT_REPORT_CARD_FORM_HEADING from './constants';

@Component(
    moduleId: module.id,
    selector: 'create-report-card-form',
    templateUrl: 'create-report-card-form.component.html'
)
export class CreateReportCardFormComponent implements OnInit 

    @Input() public reportCardDataSourcesItems: SelectItem[];
    @Input() public reportCardYearItems: SelectItem[];
    @Input() errorMessages: Message[];

    @Output() reportCardCreated = new EventEmitter<ReportCard>();
    @Output() editReportCardFormValueChanged = new EventEmitter<ReportCard>();

    public editReportCardForm: FormGroup;
    private selectedReportCardDataSourceIdControl: FormControl;
    private selectedReportCardYearControl: FormControl;

    // TODO: remove this hack for resetting the angular 2 form once a real solution is available (supposedly in RC5)
    private isFormActive: boolean = true;
    private formHeaderString: string = CREATE_REPORT_CARD_FORM_HEADING;
    private formDialogVisible: boolean = false;
    private isCreatingNewReportCard = false;  // false implies that we are updating an existing report card

    constructor(private fb: FormBuilder) 
    

    configureForm(selectedReportCard: ReportCard, createNewReport: boolean) 
        this.isCreatingNewReportCard = createNewReport;

        this.resetForm();

        this.selectedReportCardDataSourceIdControl.updateValue(selectedReportCard.reportCardDataSource.reportCardSourceId);

        this.selectedReportCardYearControl.updateValue(selectedReportCard.reportCardYear);

        if (createNewReport) 
            this.formHeaderString = CREATE_REPORT_CARD_FORM_HEADING;
         else 
            // updating an existing report card
            this.formHeaderString = EDIT_REPORT_CARD_FORM_HEADING +
                selectedReportCard.reportCardYear + ' ' + selectedReportCard.reportCardDataSource.reportCardSourceName;
        

        this.editReportCardForm.valueChanges.subscribe(data => this.onFormValueChanged(data));
    

    customGroupValidator(reportCardDataSourceIdControl: FormControl, reportCardYearControl: FormControl,
        isCreatingNewReportCard: boolean) 
        return (group: FormGroup):  [key: string]: any  => 

            // missing data error ...
            if (!reportCardDataSourceIdControl.value || !reportCardYearControl.value) 
                return  'requiredDataError': 'Report card year AND provider must be selected.' ;
            

            // invalid data error ...
            if (isCreatingNewReportCard) 
                if (!reportCardDataSourceIdControl.touched || !reportCardYearControl.touched) 
                    return  'requiredDataError': 'Report card year AND provider must be selected.' ;
                
             else 
                if (!reportCardDataSourceIdControl.touched && !reportCardYearControl.touched) 
                    return  'requiredDataError': 'Report card year OR provider must be selected.' ;
                
            

            // return null to indicate the form is valid
            return null;
        ;
    

    hideFormDialog() 
        this.formDialogVisible = false;
    

    showFormDialog() 
        // hide any previous errors
        this.errorMessages = [];
        this.formDialogVisible = true;
    

    createForm() 
        // by default, configure the form for new report card creation by setting
        // the initial values of both dropdowns to empty string
        this.selectedReportCardDataSourceIdControl = new FormControl('');
        this.selectedReportCardYearControl = new FormControl('');

        this.editReportCardForm = this.fb.group(
            selectedReportCardDataSourceIdControl: this.selectedReportCardDataSourceIdControl,
            selectedReportCardYearControl: this.selectedReportCardYearControl
        , 
                validator: this.customGroupValidator(this.selectedReportCardDataSourceIdControl, this.selectedReportCardYearControl,
                    this.isCreatingNewReportCard),
                asyncValidator: this.duplicateReportCardValidator.bind(this)
            );
    

    duplicateReportCardValidator() 
        return new Promise(resolve => 

            if ((this.errorMessages) && this.errorMessages.length === 0) 
                resolve( uniqueReportCard: true );
             else 
                resolve(null);
            
        );
    

    showError(errorMessages: Message[]) 
        this.errorMessages = errorMessages;
    

    ngOnInit() 
        this.createForm();
    

    onEditReportCardFormSubmitted() 

        let newReportCard = this.getReportCard(
            this.selectedReportCardDataSourceIdControl.value,
            this.selectedReportCardYearControl.value,
            this.reportCardDataSourcesItems
        );

        this.reportCardCreated.emit(newReportCard);
    

    resetForm() 
        this.createForm();
        this.isFormActive = false;
        setTimeout(() => this.isFormActive = true, 0);
    

    onFormValueChanged(data: any) 
        let newReportCard = this.getReportCard(
            this.selectedReportCardDataSourceIdControl.value,
            this.selectedReportCardYearControl.value,
            this.reportCardDataSourcesItems
        );

        this.editReportCardFormValueChanged.emit(newReportCard);
    

    private getReportCard(reportCardDataSourceIdString: string, reportCardYearString: string,
        reportCardDataSourceItems: SelectItem[]): ReportCard 

        let selectedReportCardYear: number = Number(reportCardYearString);
        let selectedProviderReportCardId: number = Number(reportCardDataSourceIdString);

        let selectedProviderReportCardName: string = 'Unknown Report Card';

        for (var i = 0; i < this.reportCardDataSourcesItems.length; i++) 
            var element = this.reportCardDataSourcesItems[i];
            if (Number(element.value) === selectedProviderReportCardId) 
                selectedProviderReportCardName = element.label;
                break;
            
        

        let reportCard: ReportCard = new ReportCard();

        reportCard.reportCardYear = selectedReportCardYear;

        reportCard.reportCardDataSource = new ReportCardDataSource(
            selectedProviderReportCardId,
            selectedProviderReportCardName
        );

        return reportCard;
    

create-report-card-form.component.html

<p-dialog header=formHeaderString [(visible)]="formDialogVisible" [responsive]="true" showEffect="fade "
    [modal]="true" >
    <form *ngIf="isFormActive" [formGroup]="editReportCardForm" (ngSubmit)="onEditReportCardFormSubmitted()">
        <div class="ui-grid ui-grid-responsive ui-fluid " *ngIf="reportCardDataSourcesItems ">
            <div class="ui-grid-row ">
                <p-dropdown [options]="reportCardDataSourcesItems" formControlName="selectedReportCardDataSourceIdControl" [autoWidth]="true"></p-dropdown>
            </div>
            <div class="ui-grid-row ">
                <p-dropdown [options]="reportCardYearItems" formControlName="selectedReportCardYearControl" [autoWidth]="true"></p-dropdown>
            </div>
            <div class="ui-grid-row ">
                <p-messages [value]="errorMessages"></p-messages>
            </div>
            <footer>
                <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix ">
                    <button type="submit" pButton icon="fa-check " 
                    [disabled]="!editReportCardForm?.valid" label="Save "></button>
                </div>
            </footer>
        </div>
    </form>
</p-dialog>

home.component.ts

import  Component, OnInit, ViewChild  from '@angular/core';
// // import  REACTIVE_FORM_DIRECTIVES  from '@angular/forms';
// import ROUTER_DIRECTIVES from '@angular/router';
// import  InputText, Panel, SelectItem, Message, Growl, Dialog, DataTable, Column, Header, Footer, Tooltip  from 'primeng/primeng';
import  Message, SelectItem  from 'primeng/primeng';

import CreateReportCardFormComponent from './create-report-card-form.component';
import  ReportCardDataSource, ReportCard, ProviderData, DataService,
   DUPLICATE_REPORT_CARD_MESSAGE  from '../shared/index';
import ReportCardCommands from './enums';

/**
 * This class represents the lazy loaded HomeComponent.
 */
@Component(
  moduleId: module.id,
  selector: 'sd-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css']
  //,directives: [CreateReportCardFormComponent]
)

export class HomeComponent implements OnInit 

  public growlMessages: Message[] = [];
  public createReportCardError: Message[] = [];
  public reportCardDataSourcesItems: SelectItem[] = [ label: 'Select Provider', value: '' ];
  public reportCardYearItems: SelectItem[] = [ label: 'Select Year', value: '' ];
  public providerData: ProviderData = new ProviderData();
  public displayReportCardDeleteConfirmation: boolean = false;

  private isCreatingNewReportCard: boolean = true;
  private selectedReportCard: ReportCard;

  @ViewChild(CreateReportCardFormComponent)
  private createReportCardFormComponent: CreateReportCardFormComponent;

  constructor(private dataService: DataService)  

  ngOnInit() 
    let reportCardDataSources: ReportCardDataSource[] = this.dataService.getReportCardDataSources();

    for (var i = 0; i < reportCardDataSources.length; i++) 
      var element = reportCardDataSources[i];
      this.reportCardDataSourcesItems.push( label: element.reportCardSourceName, value: element.reportCardSourceId );

      // retrieve data from localStorage if available
      this.providerData = this.dataService.getProviderData();
    

    // initialize report card years
    const minYear: number = 2000;
    // TODO: maxYear should be sourced from the server by a service
    let maxYear: number = (new Date()).getFullYear();

    for (var i = maxYear; i >= minYear; i--) 
      this.reportCardYearItems.push( value: i.toString(), label: i.toString() );
    
  

  // Returns the index of the report card in providerData.reportCards that has the same reporCardSourceId
  // and reportCardYear as selectedReportCard, or -1 if there is no match.
  indexOf(selectedReportCard: ReportCard): number 
    return this.providerData.reportCards.findIndex(x =>
      x.reportCardDataSource.reportCardSourceId === selectedReportCard.reportCardDataSource.reportCardSourceId &&
      x.reportCardYear === selectedReportCard.reportCardYear);
  

  onReportCardCreated(newReportCard: ReportCard) 
    if (newReportCard) 

      if ((this.indexOf(newReportCard) > -1)) 
        // attemp to create a duplicate report card; show error
        this.setCreateReportCardFromErrorMessage(DUPLICATE_REPORT_CARD_MESSAGE);
       else 
        if (this.isCreatingNewReportCard) 
          // save new report card
          this.createReportCardError = [];
          this.createReportCardFormComponent.hideFormDialog();
          this.providerData.reportCards.splice(0, 0, newReportCard);

          this.createReportCardFormComponent.hideFormDialog();

         else 
          // update existing report card
          let reportCardToUpdateIndex: number = this.indexOf(this.selectedReportCard);

          if (reportCardToUpdateIndex > -1) 
            this.providerData.reportCards[reportCardToUpdateIndex].reportCardDataSource.reportCardSourceId
              = newReportCard.reportCardDataSource.reportCardSourceId;
            this.providerData.reportCards[reportCardToUpdateIndex].reportCardDataSource.reportCardSourceName
              = newReportCard.reportCardDataSource.reportCardSourceName;
            this.providerData.reportCards[reportCardToUpdateIndex].reportCardYear
              = newReportCard.reportCardYear;
          
        
        this.dataService.storeProviderData(this.providerData);
        this.isCreatingNewReportCard = true;
        this.clearCreateReportCardFormErrorMessage();
        this.createReportCardFormComponent.hideFormDialog();
      
    
  

  editReportCardFormValueChanged(newReportCard: ReportCard) 
    if (this.indexOf(newReportCard) === -1) 
      // clear duplicate report card error message in 'create report card' dialog
      this.clearCreateReportCardFormErrorMessage();
     else 
      // set duplicate report card error message
      this.setCreateReportCardFromErrorMessage(DUPLICATE_REPORT_CARD_MESSAGE);
    
  

  onAddReportCardButtonClicked() 
    this.isCreatingNewReportCard = true;
    this.createReportCardFormComponent.configureForm(new ReportCard(), this.isCreatingNewReportCard);
    this.createReportCardFormComponent.showFormDialog();
  

  onReportCardDeleteButtonClicked(reportCard: ReportCard) 
    this.reportCardCommandExecute(reportCard, ReportCardCommands.Delete);
  

  onReportCardEditButtonClicked(reportCard: ReportCard) 
    this.reportCardCommandExecute(reportCard, ReportCardCommands.EditReportCard);
  

  onAddVotesRouterLinkClicked(reportCard: ReportCard) 
    this.reportCardCommandExecute(reportCard, ReportCardCommands.EditVotes);
  

  onReportCardDeleteConfirmButtonClick(isDeleteOk: boolean) 
    if (isDeleteOk) 
      this.providerData.reportCards.splice(this.providerData.selectedReportCardIndex, 1);
      // store updated reportCards in local storage
      this.dataService.storeProviderData(this.providerData);
    
    this.displayReportCardDeleteConfirmation = false;
  

  reportCardCommandExecute(reportCard: ReportCard, command: ReportCardCommands) 
    this.providerData.selectedReportCardIndex = this.indexOf(reportCard);
    this.selectedReportCard = reportCard;

    switch (command) 
      case ReportCardCommands.EditVotes:
        this.dataService.storeProviderData(this.providerData);
        break;
      case ReportCardCommands.Delete:
        this.displayReportCardDeleteConfirmation = true;
        break;
      case ReportCardCommands.EditReportCard:
        this.isCreatingNewReportCard = false;
        this.createReportCardFormComponent.configureForm(reportCard, this.isCreatingNewReportCard);
        this.createReportCardFormComponent.showFormDialog();
        break;
      default:
        break;
    
  

  private setCreateReportCardFromErrorMessage(message: Message) 
    this.createReportCardError = [];
    this.createReportCardError.push(message);

    this.createReportCardFormComponent.showError(this.createReportCardError);
  

  private clearCreateReportCardFormErrorMessage() 
    this.createReportCardError = [];
    this.createReportCardFormComponent.showError(this.createReportCardError);
  

home.component.html

<p-growl [value]="growlMessages" sticky="sticky"></p-growl>
<p-dataTable [value]="providerData.reportCards" [paginator]="true" rows="15" [responsive]="true">
  <header>
    <div>
      <h1>Report Cards (providerData.reportCards.length)</h1>
    </div>
    <button type="button" pButton icon="fa-plus" (click)="onAddReportCardButtonClicked()" label="Add" title="Add new report card"></button>
  </header>
  <p-column styleClass="col-button">
    <template let-reportCard="rowData">
      <button type="button" pButton (click)="onReportCardEditButtonClicked(reportCard)" icon="fa-pencil" title="Edit report card"></button>
    </template>
  </p-column>
  <p-column field="reportCardDataSource.reportCardSourceName" header="Report Card" [sortable]="true"></p-column>
  <p-column field="reportCardYear" header="Year" [sortable]="true"></p-column>
  <p-column header="Votes" [sortable]="false">
    <template let-reportCard="rowData">
      reportCard.votes.length
      <!--<button type="button" pButton icon="fa-pencil-square" (click)="editVotes(reportCard)" title="Edit votes"></button>-->
      <a [routerLink]="['/votes']" (click)="onAddVotesRouterLinkClicked(reportCard)">Edit</a>
    </template>
  </p-column>
  <p-column styleClass="col-button">
    <template let-reportCard="rowData">
      <button type="button" pButton (click)="onReportCardDeleteButtonClicked(reportCard)" icon="fa-trash" title="Delete report card"></button>
    </template>
  </p-column>
</p-dataTable>

<create-report-card-form [currentReportCardCount]="providerData.reportCards.length" [reportCardDataSourcesItems]="reportCardDataSourcesItems"
  [reportCardYearItems]="reportCardYearItems" (reportCardCreated)=onReportCardCreated($event) (editReportCardFormValueChanged)=editReportCardFormValueChanged($event)>
</create-report-card-form>

<p-dialog header="Confirm Deletion" [(visible)]="displayReportCardDeleteConfirmation" modal="modal" showEffect="fade">
  <p>
    Delete the following report card and all related data (<strong>NO undo</strong>)?
  </p>
  <p>
    <strong>providerData?.reportCards[providerData.selectedReportCardIndex]?.reportCardDataSource?.reportCardSourceName</strong><br/>
    <strong>providerData?.reportCards[providerData.selectedReportCardIndex]?.reportCardYear</strong>
  </p>
  <footer>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <button type="button" pButton icon="fa-close" (click)="onReportCardDeleteConfirmButtonClick(false)" label="No"></button>
      <button type="button" pButton icon="fa-check" (click)="onReportCardDeleteConfirmButtonClick(true)" label="Yes"></button>
    </div>
  </footer>
</p-dialog>

【问题讨论】：

您应该包含来自 create-report-card-form.component.ts 的代码

@Isaac - 添加了来自 create-report-card-form.component.ts 的代码

您也可以发布模板吗？该错误告诉您 create-report-card-form 模板或父组件正在尝试绑定或访问 CreateReportCardFormComponent 组件上似乎不存在的“currentReportCardCount”属性。

@AndrewBabin - 添加了父子组件的代码和模板。

【参考方案1】：

<create-report-card-form [currentReportCardCount]="providerData.reportCards.length" ...
                         ^^^^^^^^^^^^^^^^^^^^^^^^

在您的 HomeComponent 模板中，您尝试绑定到 CreateReportCardForm 组件上不存在的输入。

在 CreateReportCardForm 中，这些是您仅有的三个输入：

@Input() public reportCardDataSourcesItems: SelectItem[];
@Input() public reportCardYearItems: SelectItem[];
@Input() errorMessages: Message[];

为 currentReportCardCount 添加一个，您应该可以开始了。

【讨论】：

谢谢！为 currentReportCardCount 添加 @Input() 解决了这个问题。我的错误是假设代码是正确的，只是因为它在 RC4 及之前的版本中工作。

不客气！老实说，我有点惊讶 RC4 会忽略这样的问题。

另外，如果您的组件是共享模块。确保将其添加到 @NgModule 声明和导出数组中。

@ABabin 我也有同样的问题，但您可以在这里查看更多信息：***.com/questions/66429902/… 我想知道是否有人可以帮助我..

【参考方案2】：

我通过添加前缀 (attr.) 来修复它：

<create-report-card-form [attr.currentReportCardCount]="expression" ...

很遗憾，这还没有正确记录。

更多详情here

【讨论】：

不要这样做。它将阻止该属性被传递给嵌套指令。

@igasparetto 在这种情况下，您可能没有嵌套指令

【参考方案3】：

当我忘记在 NgModule 中声明我的自定义组件时，我遇到了同样的错误 - 检查那里，如果其他解决方案不适合你。

【参考方案4】：

如果您使用 Angular CLI 创建组件，比如CarComponent，它会将app 附加到选择器名称（即app-car），当您在父视图中引用组件。因此，您要么必须将父视图中的选择器名称更改为<app-car></app-car>，要么将CarComponent 中的选择器更改为selector: 'car'

【讨论】：

有趣的是，小事最能咬你

这个问题的答案我搜了很久！你简单地解决了这个问题！它工作正常！谢谢！

【参考方案5】：

这个错误有多种可能的原因：

1) 当您将属性 'x' 放在括号内时，您会尝试绑定到它。因此首先要检查的是属性“x”是否在您的组件中使用Input() 装饰器定义

您的 html 文件：

<body [x]="...">

你的类文件：

export class YourComponentClass 

  @Input()
  x: string;
  ...

（确保你也有括号）

2) 确保您在 NgModule 中注册了组件/指令/管道类：

@NgModule(
  ...
  declarations: [
    ...,
    YourComponentClass
  ],
  ...
)

有关声明指令的更多详细信息，请参阅https://angular.io/guide/ngmodule#declare-directives。

3) 如果您的角度指令中有错字，也会发生这种情况。例如：

<div *ngif="...">
     ^^^^^

代替：

<div *ngIf="...">

发生这种情况是因为 angular 将星号语法转换为：

<div [ngIf]="...">

【讨论】：

救命稻草。我无法收到该错误消息。问题是我没有在模块中注册我的子组件。

发生此错误的另一个原因是当您想为组件使用属性选择器但忘记选择器中的括号时。示例：你想这样做：<tr my-component></tr> 但在 @Component 你这样做 selector: 'my-component' 而不是 selector: '[my-component]'...

是的 - 该错误消息可能会产生误导 - 我赞成这个答案，因为它在一般情况下更彻底地回答了这个问题。具体来说，#2 根本不直观，因为错误“无法绑定到‘属性 X’，因为它不是‘子组件’的已知属性”——所以这是一个有用的提示来追踪它。跨度>