2017-07-31 115 views
0

我有兩個分量在我的簡單角待辦事項應用Angular2 @input傳遞數組對象

待辦事項-root.ts

import { Component } from '@angular/core'; 

export class TodoItem { 
    todo: String; 
} 

@Component({ 
    selector: 'todo-root', 
    template: ` 
    <div class="todo-root"> 
     <todo-list [todoList]="todoTaskList"></todo-list> 
     <todo-add></todo-add> 
    </div> 
    ` 
}) 
export class TodoRootComponent { 
    todoTaskList= [ 
     {todo: 'todo1'}, 
     {todo: 'todo2'}, 
    ] 
} 

待辦事項-list.ts

import { Component, Input, Output, EventEmitter } from '@angular/core'; 

export class TodoItem { 
    todo: String; 
} 

@Component({ 
    selector: 'todo-list', 
    template: ` 
    <div *ngFor="let todoTask of todoList"> 
     <span>{{todoTask.todo}}</span> 
    </div> 
    ` 
}) 
export class TodoListComponent { 

    @Input() 
    todoList:TodoItem[] = []; 
} 

如何我在我的「待辦事項列表」組件ngFor循環中獲取「todoTaskList」值。如何@input在這種情況下工作。任何人都可以請幫忙。

+1

它應該工作得很好,你可以創建一個plunker? –

回答

0

替換該行

@Input() todoList:TodoItem[] = []; 

@Input() todoList:TodoItem[]; 
+1

爲什麼?您在構造函數中定義的內容無效,因爲它將被輸入更新覆蓋 –