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发表Github Post

Answer 1

好的，看看你的git项目路线，我可以弄清楚你的ExperimentComponent是你的父母，ExperimentDetail是孩子。让我们从那开始吧。你已经从我能看到的代码中得到了你的代码，这导致了未定义的代码。

在这种情况下，你似乎想听孩子 - ＆gt;父母的互动。所以让我们试一试。您应该使用@Input()而不是@Output()。 @Input()用于父级与子级互动。

因此，您的子组件会发出事件。

你的孩子-html：`

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

你的孩子：

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

在您的父组件中：

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

在您的父作品中，您可以在此处获得所选的实验对象：

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

无法读取未定义角度2的属性“已完成”

1 个答案: