2017-07-31 111 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

为什么?您在构造函数中定义的内容无效,因为它将被输入更新覆盖 –