angularjs - 尝试向数组添加元素时，尝试对diff'3'进行比较时出现Angular 2错误

列表组件

import { Component, OnInit } from '@angular/core';
import { Todo } from '../model/todo';
import { TodoDetailComponent } from './detail.component';
import { TodoService } from '../service/todo.service';


@Component({
    selector: 'my-todos',
    styleUrls: ['/app/todo/styles/list.css'],
    templateUrl:'/app/todo/templates/list.html',
    directives: [[TodoDetailComponent]],
    providers: []
})

export class ListComponent implements OnInit {
    public todos: Todo[];
    title = 'List of Todos';
    selectedTodo: Todo;
    newTodo: string;

    constructor(private todoService: TodoService) {

    }
    ngOnInit() {
        this.getTodos();
    }
    addTodo() {
        this.todoService.addTodo(this.newTodo).then(
            todos => this.todos = todos
        );
    }
    getTodos() {
        TodoService.getTodos().then(
            todos => this.todos = todos
        );
    }
    onSelect(todo: Todo) {
        this.selectedTodo = todo;
    }
}

待办事项服务

import { Injectable } from '@angular/core';
import { Todo } from '../model/todo';
import { TODOS } from './mock-todos';

@Injectable()
export class TodoService {
    static getTodos() {
        return Promise.resolve(TODOS).then(
            todos => todos
        );
    }
    getTodo(id: number) {
        return Promise.resolve(TODOS).then(
            todos => todos.filter(todo => todo.id === id)[0]
        );
    }
    addTodo(task: string) {
        return Promise.resolve(TODOS).then(
            todos => todos.push(new Todo(TODOS.length+1, task))
        );
    }
}

从组件调用addTodo()时出现此错误：
我已经经历过好几次了，仍然不知道发生了什么。
以下是TODOS的定义：

import { Todo } from '../model/todo';

export var TODOS: Todo[] = [
    { id: 1, task: 'Do something' },
    { id: 2, task: 'Do something else' }
];

我有一个按钮触发模板中的addTodo()。

最佳答案

Angular在列表更改其值时使用diffchecker-以验证列表中包含的项以及添加到列表中的项。
发生此错误的原因可能是您试图遍历（例如使用*ngFor）不是集合的数字3。
换句话说，从错误消息中，应该是集合的变量是值3。
你的案子
因为在调用ListComponent#addTodo()时会引发异常：

public todos: Todo[];
...
addTodo() {
    this.todoService.addTodo(this.newTodo).then(
        todos => this.todos = todos
    );
}

您可能正在将值3分配给this.todosattodos => this.todos = todos。
了解上述情况后，我们必须找出为什么您的服务会因调用其3而返回addTodo()。
看看TodoService#addTodo()：

addTodo(task: string) {
    return Promise.resolve(TODOS).then(
        todos => todos.push(new Todo(TODOS.length+1, task))
    );
}

您会注意到，该方法实际上返回的是push()-的结果，这是推送之后数组的长度。由于它向TODOS模拟数组添加了一个元素，因此在推送之后它将有三个元素，从而返回3。
修复
要使其全部工作，请将集合分配给*ngFor中使用的变量，而不是数字3。
在您的例子中，由于分配给它的值是服务返回的值，所以只需让它返回数组：

addTodo(task: string) {
    return Promise.resolve(TODOS).then(
        todos => {
          todos.push(new Todo(TODOS.length+1, task));
          return todos;                                  /// ------------- added this line
        }
    );
}