无法读取未定义角度2的属性'completed‘

Question

我使用的是@Input()，根据我的理解，这个组件应该能够将<experiment [experiment]="experiment.completed"></experiment>绑定到该组件。下面是层次结构：

​

experiment.detail.component.ts

import {Component, Input, Output} from '@angular/core';
import {Experiment} from '../../common/experiment.model';
import {ExperimentsService} from "../../common/experiments.service";

@Component({
  selector: 'experiment',
  template: require('./experiment.detail.component.html'),
  styles: [`
    .experiment {
      cursor: pointer;
      outline: 1px lightgray solid;
      padding: 5px;
      margin: 5px;
    }
  `]
})

export class ExperimentDetailComponent {

  experiments: Experiment[];

  constructor(private _experimentsService:ExperimentsService){

  }

  ngOnInit() {
    this.experiments = this._experimentsService.getExperiments();
  }

  @Input() experiment: Experiment;


  doExperiment(): void {
    this.experiment.completed += 1;
  };
}

上面的HTML文件：

<div class="experiment" (click)="doExperiment()">

    <div *ngFor="let experiment of experiments">
        <div *ngIf="experiment">

            {{ experiment.name }}


            <p>
                {{ experiment.description }}
            </p>

            <p>
                <strong>{{experiment.completed}}</strong>
            </p>
        </div>
    </div>
</div>

然而，当我在experiments.component.html上调用它时，我得到了错误：

<h1 class="align-middle">
    {{ title }}
</h1 >
<p class="align-middle">
    {{ body }}
</p>
<hr/>

<experiment [experiment]="experiment.completed"></experiment>

<hr/>
<div>
    <h2 class="table table-striped">Experiments: {{message}}</h2>
    <div class="form-inline">
        <input type="text" [(ngModel)]="message" placeholder="Message">
        <button type="submit" class="btn" (click)="updateMessage(message)">Update Message</button>
    </div>
</div>

错误：

EXCEPTION: Uncaught (in promise): Error: Error in ./ExperimentsComponent class 
ExperimentsComponent - inline template:8:12 caused by: Cannot read property '    
completed' of undefined

NgModule：

import {BrowserModule} from "@angular/platform-browser";
import {NgModule,CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {ExperimentsComponent} from "./experiments/experiments.component";
import {AboutComponent} from "./about/about.component";
import {AppComponent} from "./app.component";
import {ExperimentsService} from "./common/experiments.service";
import {StateService} from "./common/state.service";
import {ExperimentDetailComponent} from "./experiments/experiment-details/experiment.detail.component";

    @NgModule({
        declarations: [
            AppComponent,
            AboutComponent,
            HomeComponent,
            ExperimentsComponent,
            ExperimentDetailComponent
        ],
        imports: [
            BrowserModule,
            FormsModule,
            HttpModule,
            RouterModule.forRoot([
                {path: '', redirectTo: '/home', pathMatch: 'full'},
                {path: 'home', component: HomeComponent},
                {path: 'about', component: AboutComponent},
                {path: 'experiments', component: ExperimentsComponent},
                {path: '**', component: HomeComponent}
            ])
        ],
        schemas: [
          CUSTOM_ELEMENTS_SCHEMA
        ],
        providers: [
            ExperimentsService,
            StateService
        ],
        bootstrap: [AppComponent]
    })
    export class AppModule {
    }

Github post Github Post