Question

我有一个组件列表及其子组件（组件项）。我试图将信息从列表传递到项目，但似乎数据绑定不起作用，因为该对象为空，即使我已经（希望）正确初始化了。

这是具有自己模板的列表组件：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Recipe } from '../recipe';
import { RecipeItemComponent } from './recipe-item.component';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styles: []
})

export class RecipeListComponent implements OnInit {
  @Output() recipeSelected = new EventEmitter<Recipe>();
  recipes: Recipe[] = [];
  public recipe: Recipe;

  constructor() {
    this.recipe = new Recipe('Dummy', 'Dummy', 'http://thumbs1.ebaystatic.com/d/l225/m/mfXELL6zPWJE4OC0agiXMZw.jpg');
  }

  ngOnInit() {
  }

  onSelected(recipe: Recipe) {
    this.recipeSelected.emit(recipe);
  }
}

<div class="row">
  <div class="col-xs-12">
    <a class="btn btn-success">New Recipe</a>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <ul class="list-group">
      <app-recipe-item> [recipe]="recipe" (click)="onSelected(recipe)"></app-recipe-item>
    </ul>
  </div>
</div>

这里是组件项目：

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from '../recipe';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styles: []
})
export class RecipeItemComponent implements OnInit {
  @Input() recipe: Recipe;
  recipeId: number;

  constructor() { 

  }

  ngOnInit() {
  }
}

<a href="#" class="list-group-item clearfix">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{name}}</h4>
    <p class="list-group-item-text">{{description}}</p>
  </div>
  <span class="pull-right">
      <img class="img-responsive"
           src="{{imagePath}}"
           style="max-height: 50px;"/>
  </span>
</a>

错误：

Unhandled Promise rejection: Error in ./RecipeItemComponent class RecipeItemComponent - inline template:2:40 caused by: Cannot read property 'name' of undefined ; Zone: <root> ; Task: Promise.then ; Value:
ViewWrappedError
Error: Error in ./RecipeItemComponent class RecipeItemComponent - inline template:2:40 caused by: Cannot read property 'name' of undefined
    at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6880:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:24986:16)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:25051:16)
    at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:53759:16)
    at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:72648:23)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:72621:18)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:72408:18)
    at CompiledTemplate.proxyViewClass.View_RecipeListComponent0.detectChangesInternal (/AppModule/RecipeListComponent/component.ngfactory.js:96:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:72423:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:72618:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:72408:18)
    at CompiledTemplate.proxyViewClass.View_RecipesComponent0.detectChangesInternal (/AppModule/RecipesComponent/component.ngfactory.js:83:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:72423:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:72618:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:72408:18)

这是我的角度版本：

angular-cli: 1.0.0-beta.28.3
node: 7.6.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/compiler-cli: 2.4.9

感谢您的任何建议。

添加信息：

食谱类对象：

export class Recipe {
    constructor(public name: string, public description: string, public imagePath: string) {

    }
}

Answer 1

对我而言，第一件事就是你实际上并没有绑定到模板中的recipe。您正试图自己绑定到其属性。例如，请尝试{{recipe.name}}，而不仅仅是{{name}}。

此处还有另一个错误：

<app-recipe-item> [recipe]="recipe" (click)="onSelected(recipe)"></app-recipe-item>

注意app-recipe-item选择器上的已关闭标记。我不知道你的标记中是否存在这种情况。解决这个问题。

 <app-recipe-item [recipe]="recipe" (click)="onSelected(recipe)"></app-recipe-item>

最后，您能否解释为什么在父组件中已有recipe时点击app-recipe-item时会发出recipe？换句话说，app-recipe-item似乎从父组件获得recipe。目前还不清楚为什么父组件需要从孩子身上取回它。

Answer 2

尝试默认初始化： @Input（）recipe：Recipe = new Recipe（）使用＆＃39;默认＆＃39; RecipeItemComponent中的对象或/和使用默认的Recipe对象定义公共配方：app-recipe-list中的配方。

数据绑定期间出错：property为null

2 个答案: