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

我的项目有一些功能,其中一个叫做“家”.家庭组件使用称为create-report-card-form的子组件.我已经在home.module中声明了home和create-report-card-form组件(见下面的代码),并得到这个错误：

Unhandled Promise rejection: Template parse errors:
Can't bind to 'currentReportCardCount' since it isn't a kNown property of 'create-report-card-form'.

1. If 'create-report-card-form' is an Angular component and it has 'currentReportCardCount' input,then verify that it is part of this module.

项目结构

-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,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 { httpR_59_11845@odule } 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,httpR_59_11845@odule,RouterModule.forRoot(routes),AboutModule,HomeModule,TestModule,VoteDataEntrymodule,SharedModule.forRoot()],declarations: [AppComponent],providers: [{
    provide: APP_BASE_HREF,useValue: '<%= APP_BASE %>'
  }],bootstrap: [AppComponent]

})

export class AppModule { }

创建报告卡,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.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;
    }
}

创建报告卡,form.component.html

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

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,message,Growl,Dialog,DataTable,column,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,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 [currentReportCardCount]="providerData.reportCards.length" ...
                         ^^^^^^^^^^^^^^^^^^^^^^^^

@input() public reportCardDatasourcesItems: SELEctItem[];
@input() public reportCardYearItems: SELEctItem[];
@input() errormessages: message[];

• 上一篇：用硒测试AngularJS下一篇：指令中的Angular2样式