Kann die Eigenschaft 'completed' von undefiniertem Winkel 2 nicht lesen

Question

Ich verwende @Input() und nach meinem Verständnis sollte diese Komponente <experiment [experiment]="experiment.completed"></experiment> an die Komponente binden können. Hier ist die Hierarchie:

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

Die HTML-Datei der oben:

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

aber wenn ich es auf dem experiments.component nennen .html Ich erhalte den Fehler:

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

Fehler:

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 posten Github Post

Answer 1

Okay, an Ihren git Projekt Routen suchen kann ich herausfinden, dass viel, dass Ihre ExperimentComponent Ihre Eltern und die ExperimentDetail ist das Kind. Fangen wir also damit an. Du hast deinen Code rückwärts von dem, was ich sehen kann, und das verursacht das undefinierte.

Es scheint, dass Sie in diesem Fall Kinder -> Elterninteraktion hören möchten. Lass uns das mal versuchen. Anstelle von @Input() sollten Sie @Output() verwenden. @Input() ist für Eltern-> Kind-Interaktion.

So gibt Ihre Kindkomponente Ereignisse aus.

Ihr Kind-html: `

<div *ngFor="let experiment of experiments" (click)="doExperiment(experiment)"> 
      {{ experiment.name }} </div> 

Ihr Kind-comp:

@Output() onIncrement = new EventEmitter<Object>(); 

doExperiment(experiment) { 
    // increments the completed property as you wished 
    experiment.completed +=1; 
    // here we emit the chosen experiment to the parent 
    this.onIncrement.emit(experiment) 
}; 

Und in Ihrer Stammkomponente:

<experiment (onIncrement)="onIncrement($event)"></experiment> 

Und in Ihren Eltern comp erhalten Sie die gewähltes Experiment-Objekt hier:

onIncrement(value) { 
    console.log("val: ", value); 
    // do whatever you want 
}