反转* ngFor数组会导致闪烁

Question

我偶然发现了一个非常奇怪的问题。我正在使用Angular构建Ionic应用程序，并且我的ngFor上带有reverse，很奇怪的是，如果我在设备上运行它，它的效果会非常好，但是我一添加--prod变量以使其在生产状态下运行reverse会引起强烈的闪烁。本质上，它每秒钟在reverse状态和未反转状态之间切换...当它不在生产中时，它可以完美地工作。

这是一个gif：

19小时是我想首先显示的内容，15天是我想最后显示的内容。

这是我从firebase提取的代码：

goToNew() {
  this.zone = new NgZone({});
  this.postFeed = new Array();
  this.feedCounter = new Array();

  this.database.database.ref('/posts/'+this.locationId)
  .orderByChild('created')
  .limitToLast(10)
  .once('value', (snapshot) => {
    snapshot.forEach(child => {
        this.feedCounter.push(child.val());
        this.postFeed.push(child.val());

        return false;
    });
  });
}

这是我的HTML：

<ng-container *ngFor="let post of postFeed.reverse; let i = index">
  <div *ngIf="i > 0 && i % 10 == 0" class="pageIndicator">
    <div class="seperator"></div>
    <div class="pageNumb">Page {{i / 10 + 1}}</div>
    <div class="seperator"></div>
  </div>
  <post [postData]="post"></post>
</ng-container>

我也曾在this.postFeed.reverse()函数中尝试过goToNow()，但它确实做同样的事情。我还尝试了this.postFeed.unshift()而不是push，但这根本没有用。

就像我说的那样，当我以以下方式运行应用程序时，此方法可以100％起作用：

ionic cordova run android --device

但我会尽快

ionic cordova run android --device --prod

它吓坏了。删除reverse可行，但这不是我要显示数组的方式。

我在做什么错？这是Ionic / Angular /其他问题吗？我不知道，为什么这不适用于--prod。

Answer 1

它似乎是由postFeed.reverse()引起的，它{strong>会自行更改并返回。

这意味着，

var tmp = [1,2,3]
var tmp2 = tmp.reverse()
console.log(tmp) // [3,2,1]
console.log(tmp2) // [3,2,1]
console.log(tmp===tmp2) // true

以上代码中的最后一条语句表示tmp.reverse()不会返回新数组，而是自身。

因此，在您的 .html 代码中，postFeed.reverse()返回颠倒的。随着更改的发生，postFeed.reverse()会重复执行。然后，视图内容也会更改，因为内容已更改。因此，视图一定在闪烁。

您应该使用这种代码（例如，效率不高。） postFeed.concat().reverse()