后端服务中阵列的Angular2更新视图

Question

I have a ListComponent and EntryComponent for appending an item into the list. When an item is pushed into the list through the DataService, the list is not updated in the ListComponent. Any ideas for the angular2 way of working about this?

List Service:

import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
    public items:Array<any> = [];
    addItem(item:string):void{
            this.items.push(item);
            console.log(this.items);
    }
}

Simple List Component:

import { Component, Input, Output } from 'angular2/core';
import {ChangeDetectionStrategy} from "angular2/core";
@Component({
    selector: "list",
    template: "<div><ul><li *ngFor='#item of items'>{{item}}</li></ul>",
    changeDetection:ChangeDetectionStrategy.OnPush
})
export class ListComponent{
    @Input() items:Array<any>;
}

Entry Component:

import {Component,EventEmitter, Output} from "angular2/core";

@Component({
    selector:'entry-form',
    template:'<div><input type="text" #myinput (keyup.enter)="emitEntry(myinput)"/></div>'
})
export class EntryComponent{
    @Output() newEntry = new EventEmitter();
    emitEntry(input):void{
        this.newEntry.emit(input.value);
        input.value="";
    }
}

App Component (root component):

import { Component } from 'angular2/core';
import { ListComponent } from './list.component';
import {DataService} from './list-service';
import {EntryComponent} from './entry-form';

@Component({
    selector:'my-app',
    directives:[ListComponent,EntryComponent],
    providers:[DataService],
    template:
        "<list [items]='listService.items' ></list> " +
        "<entry-form (newEntry)='listService.addItem($event)'></entry-form> "
})

export class AppComponent{
    constructor(public listService: DataService){
    }
}

Edit I was able to produce the correct result by adding this line to the addItem() method in the DataService:

this.items = this.items.splice(0,this.items.length-1);

However, this doesn't seem the angular2 way.

Thanks in advance!

Edit Here is a plunker of the code

Answer 1

Remove the ´changeDetection:ChangeDetectionStrategy.OnPush´

Just leave the component to:

@Component({
    selector: "list",
    template: "<div><ul><li *ngFor='#item of items'>{{item}}</li></ul>"
})

You can see it here

Answer 2

With ChangeDetectionStrategy.OnPush , Angular will only check your component's databindings (such as {{item}} in your template) if at least one of the component's input properties has changed. The other important piece of information is that, for input properties that are arrays, Angular change detection checks the arrays for reference changes only – ie, it only checks to see if array references have changed, not the contents of the arrays.

Since array input property items continues to point to (reference) the same array when you push() new items from the server onto it, Angular change detection does not consider the array to have changed, hence no input property changes for Listcomponent are detected, so it doesn't check the component's databindings.

Removing ChangeDetectionStrategy.OnPush works because by default, Angular change detection checks all databindings, even if the input properties have not changed. Since you have bindings for each element of the array, change detection will notice that there is a new binding when ngFor is re-evaluated.