データバインディング中にエラーが発生しました：プロパティがnullです

私はコンポーネントリストとその子（コンポーネントアイテム）を持っています。リストから項目へ情報を渡そうとしていますが、正しく初期化されていてもオブジェクトがnullであるためデータバインディングが機能しないようです。データバインディング中にエラーが発生しました：プロパティがnullです

これは、独自のテンプレートを使用して、リストの要素である：

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) { 

    } 
}

出典

2017-03-16 Max Bertoli

'？ –

未定義の 'name'プロパティを読み取ることができません、 'RecipeItemComponent 'の変数宣言を確認してください –

私が最初に出すのは、実際にあなたのテンプレートのrecipeにバインドしていないということです。あなた自身でプロパティにバインドしようとしています。たとえば、{{name}}の代わりにを試してください。

別のエラーがここにあります：

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

はapp-recipe-itemセレクタで、閉じタグに注目してください。それがあなたのマークアップに存在するかどうかはわかりません。このように修正してください。すでに親コンポーネントでrecipeを持っているときにapp-recipe-itemをクリックする上recipeを発するだろう、なぜ

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

最後に、あなたは説明できますか？つまり、app-recipe-itemは親コンポーネントからrecipeを取得しているようです。なぜ親コンポーネントが子からそれを戻す必要があるのかは不明です。

出典

2017-03-16 22:14:32

ありがとうございます、あなたの目は私のものより優れています。問題はあなたが気づいたように間違った形式のHTMLだった。今は期待どおりに動作します。再度、感謝します！！ –

自分のコードになると、みんなの目が良くなります。（：好奇心のせいで、{{{name}}の代わりに '{{recipe.name}} 'を追加する必要があったと思いますが、それは正しいのですか？そうでない場合は、私の答えから削除します。私も理由を知りたいのですが。 –

あなたは正しいです。私は試しに残して、私は自分の質問に貼り付けます。 –

するTryデフォルトの初期化の： @Input（）レシピ：レシピ=新しいレシピ（）RecipeItemComponentまたは内部の 'デフォルト' オブジェクトを使用して/およびパブリックレシピを定義します。デフォルトのレシピオブジェクトを使用して、app-recipe-list内のレシピを定義します。

出典

2017-03-16 22:09:05 dimeros

データバインディング中にエラーが発生しました：プロパティがnullです

{{recipe.name}}

答えて

関連する問題