Angular2 @input 传递数组对象

Question

我的简单 Angular 待办事项应用程序中有两个组件

tod​​o-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'},
    ]
}

待办事项列表.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[] = [];
}

如何在“todo-list”组件 ngFor 循环中获取“todoTaskList”值。如何@input 在这种情况下工作。谁能帮忙。

Answer 1

替换此行

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

与

@Input() todoList:TodoItem[];