(单击)在* ngFor内的破折号(如果来自函数) [英] (click) broken inside *ngFor on elements of type array if coming from a function

问题描述

在 plnkr 中，我再现了一个奇怪的边缘情况.使用pixijs时，它可能取决于pixijs或webgl.

in plnkr I've reproduced a strange edge case. It probably depends on pixijs or perhaps on webgl as it happens when using pixijs.

请注意如何单击列表中的所有元素，但是一旦开始使用pixijs(只需单击按钮)，单击就会停止处理array类型的元素. 奇数的事情是它仍然可以在所有其他元素上使用. 更奇怪是，如果不是使用函数返回数组，而是使用内联数组，则所有函数都按预期运行...

Notice how you can click on all the elements of the lists but as soon as you start using pixijs (just click on the button) the click stop working on the element of type array. The odd thing is that it still works on all the other elements. It is even odder that if instead of using a function to return an array, it is used an inline array, all works as expected...

有什么想法吗?

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

推荐答案

问题是由

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

和

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

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

With every event Angular invokes change detection and each time it checks whether the previously returned value from ns() is the same as the current one it turns out to be different every time, because each call to ns() returns a new array. Angular expects the model to stabilize.

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

Angular doesn't compare properties or the contents of objects and arrays, it only does identity checks and ns() for every call returns a new and thus different array instance.

应该是

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

这篇关于(单击)在* ngFor内的破折号(如果来自函数)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！