Fehler während der Datenbindung: Eigenschaft ist null

Question

Ich habe eine Komponentenliste und ihr Kind (Komponentenelement). Ich versuche, Informationen von Liste zu Element zu übergeben, aber es scheint, Datenbindung funktioniert nicht, weil das Objekt null ist, auch wenn ich (hoffe) richtig initialisiert wurde.

Dies ist die Liste Komponente mit einer eigenen Vorlage:

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> 

Und hier die Komponente Artikel:

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> 

Der Fehler:

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) 

Hier ist meine abgewinkelte Ausführung:

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 

Vielen Dank für einen Vorschlag.

Hinzugefügte Informationen:

Rezept Klassenobjekt:

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

    } 
} 

Answer 1

Das erste, was bei mir herausspringt, ist, dass Sie in Ihrer Vorlage nicht wirklich an recipe binden. Sie versuchen, selbst an seine Eigenschaften zu binden. Versuchen Sie zum Beispiel {{recipe.name}} anstatt nur {{name}}.

Es gibt einen weiteren Fehler hier:

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

Hinweis der geschlossene Tag am app-recipe-item Selektor. Ich weiß nicht, ob das in Ihrem Markup vorhanden ist oder nicht. Repariere das so.

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

Schließlich können Sie erklären, warum Sie recipe auf klicken app-recipe-item emittieren würde, wenn Sie bereits recipe in der übergeordneten Komponente haben? Mit anderen Worten, scheint recipe von der Stammkomponente zu bekommen. Es ist unklar, warum die Elternkomponente es vom Kind zurückbekommen müsste.

Answer 2

Try Standardinitialisierung von: @Input() Rezept: Rezept = new Rezept() ein 'default' Objekt innerhalb des RecipeItemComponent mit oder/und definieren das öffentliche Rezept: Rezept in der App-Rezept-Liste mit einem Standard-Rezept-Objekt.