數據綁定期間出錯：屬性爲空

我有一個組件列表及其子組件（component item）。我試圖從列表傳遞信息到項目，但它似乎數據綁定不起作用，因爲對象爲空，即使我（希望）正確初始化。數據綁定期間出錯：屬性爲空

這是List組件都有自己的模板：

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

'？ –

無法讀取未定義的屬性'名稱'，檢查'RecipeItemComponent'中的變量聲明' –

跳到我的第一件事是，你實際上並沒有綁定到你的模板中的recipe。你試圖自己綁定到它的屬性。例如，嘗試而不是{{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>

最後，你能解釋一下爲什麼你會在點擊app-recipe-item發出recipe當你已經在父組件recipe？換句話說，app-recipe-item似乎從父組件獲取recipe。目前還不清楚爲什麼父母的組成部分需要從孩子那裏拿回來。

來源

2017-03-16 22:14:32

非常感謝，你的眼睛比我的好。問題在於您注意到的格式不正確的html。現在它按預期運行。再次感謝！！ –

當涉及到您自己的代碼時，每個人的眼睛都更好。（：出於好奇，我認爲你還需要添加'{{recipe.name}}'而不是'{{name}}'是否正確？如果不是，我會從我的答案中刪除。我也想知道爲什麼。 –

你是對的，我只是試了一下，我粘貼了我的問題，一切都是因爲它應該是:) –

嘗試缺省初始化的： @input（）配方：配方=新配方（）使用RecipeItemComponent或內部的 '默認' 對象/和定義公開食譜：使用默認食譜對象在app-recipe-list內部食譜。

來源

2017-03-16 22:09:05 dimeros

數據綁定期間出錯：屬性爲空

{{recipe.name}}

回答

相關問題