(单击)破坏内部*ng对于类型数组的元素,如果来自函数

Question

在plnkr我再现了一个奇怪的边缘案例.它可能取决于pixijs,或者可能取决于使用pixijs时发生的webgl.

请注意如何单击列表的所有元素,但是一旦开始使用pixijs(只需单击按钮),单击就会停止处理类型数组的元素.该奇怪的是,它仍然适用于所有其他元素.这是更奇怪的是,如果不是使用一个函数返回一个数组,它使用了直列排列,所有的作品如预期...

有任何想法吗 ？

app.component.ts

<button *ngIf="!renderer" (click)="breakIt()">break me</button> 
<span *ngIf="renderer">BROKEN</span>
Clicked: {{clicked | json}}

<h2>It breaks</h2>
<h3 *ngFor="#n of ns()" (click)="click(n)">{{n | json}}</h3>

<h2>It works</h2>
<h3 *ngFor="#n of [[2,4],'ciao',4,true]" (click)="click(n)">{{n | json}}</h3>

app.component.html

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html'
})
export class AppComponent { 
  clicked = "";
  renderer;

  breakIt() {
    this.renderer = PIXI.autoDetectRenderer(200, 200,{backgroundColor : 0x1099bb});
  }

  ns() {
    return [[2,4],'ciao',4,true];
  }

  click(n) {
    this.clicked=n;  
  }
}

Answer 1

问题是由

  ns() {
    return [[2,4],'ciao',4,true];
  }

和

<h3 *ngFor="#n of ns()"

对于每个事件,Angular会调用更改检测,并且每次检查先前返回的值是否与ns()当前返回的值相同时,每次都会变得不同,因为每次调用都会ns()返回一个新数组.Angular希望该模型能够稳定下来.

Angular不会比较属性或对象和数组的内容,它只进行身份检查,并且ns()每次调用都会返回一个新的,因此不同的数组实例.

相反它应该是

  var arr = [[2,4],'ciao',4,true]; 
  ns() {
    return this.arr;
  }