Angular 2 Fehler zu diff versucht, '3', wenn Elemente Array

Question

list.component

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.service

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

ich diesen Fehler hinzuzufügen versuchen, wenn addTodo() von der Komponente Aufruf:

ich habe über sie mehr tim gegangen Und ich habe immer noch keine Ahnung, was vor sich geht.

Hier ist die Definition von TODOS:

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

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

ich eine Taste, die die addTodo() in der Vorlage auslöst.

Answer 1

Angular verwendet diesen Diffchecker , wenn die Liste ihre Werte ändert - um zu überprüfen, welche Elemente die Liste hatte und welche Elemente hinzugefügt wurden.

Der Fehler tritt auf, weil Sie wahrscheinlich versuchen, über die Nummer *ngFor die Nummer 3 zu iterieren, etwas, das keine Sammlung ist.

Mit anderen Worten, aus der Fehlermeldung, Ihre Variable, die eine Sammlung sein sollte, ist der Wert 3.

Ihr Fall

Da die Ausnahme ausgelöst, wenn Sie ListComponent#addTodo() nennen:

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

Sie wahrscheinlich den Wert 3-this.todos bei todos => this.todos = todos zuweisen.

Wenn Sie das oben genannte wissen, müssen wir herausfinden, warum Ihr Dienst 3 als Ergebnis eines Anrufs zu seinem addTodo() zurückgibt.

einen Blick auf TodoService#addTodo() Taking:

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

Sie werden bemerken, dass das Verfahren tatsächlich das Ergebnis der push() Rückkehr - das ist die Länge der Anordnung nach dem Push ist. Und da es dem TODOS Mock-Array ein Element hinzufügt, hat es nach dem Push drei Elemente und gibt somit 3 zurück.

Fix

Um es alle Arbeit zu machen, eine Sammlung an die am *ngFor, nicht die Anzahl 3 verwendeten Variablen zuweisen.

In Ihrem Fall, da der Wert zugewiesen derjenige vom Dienst zurück ist, einfach das Array zurück:

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