数据绑定期间出错：属性为空

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 版本：

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

感谢任何建议。

补充信息：

配方class对象：

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

    }
}

Answer 1

尝试默认初始化： @Input() 配方：Recipe = new Recipe() 使用 RecipeItemComponent or/and 内的 'default' 对象使用默认 Recipe 对象定义 public recipe：app-recipe-list 中的 Recipe。

Answer 2

首先让我吃惊的是，您实际上并没有绑定到模板中的 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。目前还不清楚为什么父组件需要从子组件取回它。

数据绑定期间出错：属性为空

Error during data binding: property is null

typescript

angular-cli

angular2-databinding

angular

数据绑定期间出错：属性 为空

Error during data binding: property is null

typescript

angular-cli

angular2-databinding

angular

数据绑定期间出错：属性为空