Ошибка при привязке данных: свойство равно нулю

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(), используя объект 'default' внутри RecipeItemComponent или /, и определите открытый рецепт: Recipe внутри app-recipe-list со стандартным объектом Recipe.