Angular：子指令属性绑定只能看到初始值

Question

我有一个 Parent 组件和一个 Child 指令。 Parent 有一个整数数组通过属性 events-data 传递给 Child。

问题是点击 Add 按钮时 ng-for 循环可以看到变化（并且在数组中添加了一个整数）但是 Child 指令中的 onChange 函数页面加载后不再调用。所以 Child 看到了数组的初始内容，但之后就再也没有更新过。

import {NgFor,Component,View, Directive, LifecycleEvent} from 'angular2/angular2';
import {routerDirectives} from 'angular2/router';
import {Inject} from 'angular2/di';

@Directive({
    selector:'child',
    lifecycle: [ LifecycleEvent.onChange ],
    properties: [ 'data: events-data' ]
})
export class Child{
    data: Array<number>;
    constructor() {
    }

    onChange(changes:{idx: string, PropertyUpdate}) {
        if (changes['data']) {
            console.log("DATA WAS UPDATED");
        }
    }
}

@Component({
    selector:'parent'
})
@View({
    template:`
    <child [events-data]="eventsData"></child>
    <button (click)="addValue()">Add</button>

    <li *ng-for="#ev of eventsData">
        {{ev}}
    </li>
    `,
    directives:[routerDirectives,Child,NgFor]
})
export class Parent{
    eventsData:Array<number>;

    constructor() {
        this.eventsData = [10,20,30,40,50,60];
    }
    addValue(){
        this.eventsData.push(100);
    }
}

Answer 1

这是您的解决方法

  addValue(){
    var array = this.eventsData.slice(0); // create array copy
    array.push(100); // mutate array copy
    this.eventsData = array; // replace ref
  }

Angular：子指令属性绑定只能看到初始值

Angular: Child directive attribute binding only seeing initial values

angular