Angular2 RC5: 'Property X'에 바인딩할 수 없습니다. 'Child Component'의 알려진 속성이 아니기 때문입니다.

Angular2 RC5: 'Property X'에 바인딩할 수 없습니다. 'Child Component'의 알려진 속성이 아니기 때문입니다.

Angular2 RC5로 업그레이드하려는 Angular2 Seed 프로젝트를 기반으로 한 작은 Angular2 프로젝트가 있습니다.

제 프로젝트에는 몇 가지 특징이 있는데, 그 중 하나는home. 홈 구성 요소는 다음과 같은 하위 구성 요소를 사용합니다.create-report-card-form. 나는 집을 선언했고,create-report-card-form의 구성 요소home.module(아래 코드 참조) 다음 오류가 발생합니다.

처리되지 않은 약속 거부:템플릿 구문 분석 오류: 'currentReportCardCount'는 'create-report-card-form'의 알려진 속성이 아니므로 바인딩할 수 없습니다.

1. '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

집에 있는.

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 { }

앱.앱

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.component.create

<p-dialog header={{formHeaderString}} [(visible)]="formDialogVisible" [responsive]="true" showEffect="fade "
    [modal]="true" width="400">
    <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>

홈.구성요소.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);
  }
}

홈.구성요소.파일

<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 [currentReportCardCount]="providerData.reportCards.length" ...
                         ^^^^^^^^^^^^^^^^^^^^^^^^

HomeComponent 템플릿에서 CreateReportCardForm 구성 요소에 존재하지 않는 입력에 바인딩하려고 합니다.

CreateReportCardForm에서는 다음과 같은 입력이 세 가지뿐입니다.

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

현재 ReportCard Count에 하나를 추가하면 됩니다.

접두사(attr.)를 추가하여 수정했습니다.

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

유감스럽게도 이것은 아직 제대로 문서화되지 않았습니다.

자세한 내용은 여기에

이 오류에는 여러 가지 원인이 있을 수 있습니다.

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="...">

이는 후드 아래의 각이 별표 구문을 다음과 같이 변환하기 때문에 발생합니다.

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

Angular CLI를 사용하여 구성요소를 생성하는 경우 다음과 같이 가정합니다.CarComponent, 붙습니다app선택자 이름(즉, 선택자 이름)으로app-car) 및 상위 보기에서 구성 요소를 참조하면 위의 오류가 발생합니다.따라서 상위 보기에서 선택기 이름을 다음과 같이 변경해야 합니다.<app-car></app-car>는서를다e에서 합니다.CarComponentselector: 'car'

, 제 를 에 하는 을 한 가 했습니다 했습니다 가 한 NgModule이 사용자에게 -른이가면를요해게요해를면k가e,이-게ne른fss .

상위 구성요소:

1단계:

app.component.ts 파일부모 클래스 파일)

export class AppComponent {
  name = "Bruce Waine";
}

app.component.html 파일부모 템플릿 파일)

<app-child [data]="name"></app-child>   <!-- <app-child> is child component selector -->

하위 구성요소:

2단계:

child.component.ts 입력이 요소 (부모 입력이 있는 자식 구성 요소 클래스 파일)

import { Component, OnInit, Input } from '@angular/core';
export class ChildComponent implements OnInit {
  @Input() data: any; /**** Add this line ****/

  constructor() { }

  ngOnInit(): void {
  }

}

child.component.html 요소 파일 (자녀 구성 요소 템플릿 파일)

<p>{{data}}</p>

언급URL : https://stackoverflow.com/questions/38960141/angular2-rc5-cant-bind-to-property-x-since-it-isnt-a-known-property-of-chi