angularjs - Angular 2 Fel vid försök att jämföra '3' när man försöker lägga till ett element i en array

lista.komponent

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;
    }
}

todo.tjänst

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))
        );
    }
}

Jag får detta fel när jag anropar addTodo() från komponenten:

Jag har gått igenom det flera gånger och har fortfarande ingen aning om vad som pågår.

Här är definitionen av TODOS:

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

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

Jag har en knapp som utlöser addTodo() i mallen.

Svar #1

Angular använder den diffchecker när listan ändrar sina värden - för att verifiera vilka objekt listan hade och vilka objekt som lades till.

Felet uppstår för att du troligen försöker iterera över (till exempel med *ngFor) talet 3, något som inte är en samling.

Med andra ord, från felmeddelandet är din variabel som borde vara en samling värdet 3.

Ditt fall

Eftersom undantaget kastas när du anropar ListComponent#addTodo():

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

Du tilldelar förmodligen värdet 3 till this.todos vid todos => this.todos=todos.

Med tanke på det ovanstående måste vi ta reda på varför din tjänst returnerar 3 som resultat av ett anrop till dess addTodo().

Tar en titt på TodoService#addTodo():

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

Du kommer att märka att metoden faktiskt returnerar resultatet av push() - vilket är längden på arrayen efter pushen. Och eftersom den lägger till ett element i TODOS mock-arrayen, kommer den att ha tre element efter pushen, och därmed returnera 3.

Fixa

För att få allt att fungera, tilldela en samling till variabeln som används vid *ngFor, inte numret 3.

I ditt fall, eftersom värdet som tilldelas det är det som returneras av tjänsten, gör helt enkelt så att den returnerar arrayen:

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