Реверсивный массив * ngFor вызывает мерцание - PullRequest
Новая
       6

Реверсивный массив * ngFor вызывает мерцание

0 голосов
/ 26 июня 2018

Я наткнулся на действительно странную проблему. Я создаю приложение Ionic с Angular, и у меня есть ngFor с reverse, странная вещь, это фантастически работает, если я запускаю его на своем устройстве, но как только я добавляю --prod переменная для запуска в рабочем состоянии reverse вызывает сильное мерцание. По сути, он меняется между состоянием reverse и нереверсивным каждую секунду ... Он отлично работает, когда не работает.

Вот гифка:

enter image description here

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.

1 Ответ

0 голосов
/ 27 июня 2018

Кажется, что это вызвано postFeed.reverse(), который меняет себя и возвращает себя .

что означает, 

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()

...