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()返回的值是否与当前值相同时，每次都会变得不同，因为每次调用{{1} }返回一个新数组。 Angular希望模型能够稳定下来。

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

相反它应该是

ns()

Answer 2

有趣的是，你正在获得无限的变革循环。我发生了，因为每次从ns()返回新数组时，PIXI.autoDetectRenderer会以某种方式触发角度变化事件。

尝试设置changeDetection：ChangeDetectionStrategy.OnPush - 它的工作原理。所以我猜角度检测渲染器对象的周期性变化并开始处理变化，并且因为每次模板值都不能停止！= ns（）方法结果。

（单击）破坏内部* ngFor对于类型数组的元素，如果来自函数

2 个答案: