Почему Array на самом деле отсортирован, но в HTML выглядит иначе? - PullRequest
0 голосов
/ 18 июня 2019

Я пытаюсь отсортировать массив, полученный с помощью Observable . Я должен сделать http-вызов (this.myService.getReview(id)), используя свойство res (идентификатор) и добавить это свойство к res['like_count']. Наконец, я должен вставить res в массив this.finalist, чтобы использовать его в HTML-коде.

Мне нужно отсортировать его по значению like_count, чтобы отобразить элементы в правильном порядке. Как вы можете видеть ниже, я пытался реализовать метод сортировки, но я не уверен, что он находится в правильном положении.

В результате первая часть предметов находится в правильном порядке, но в определенный момент порядок снова становится случайным , а если я попытаюсь console.log(this.finalist), порядок будет правильным.

Что я мог попытаться решить? Это связано с асинхронными функциями? Спасибо

component.ts

finalist = [];

.subscribe((res => {
            for (let i=0; i < res.length; i++) {
              for (let m=1; m < Object.keys(res[i]).length - 1; m++) {
                this.myService.getReview(res[i][m]['id'])
                .then((res2 => {
                    res[i][m]['like_count'] = parseInt(res2['like_count'])
                  if (!(this.finalist.some(e => e.title == this.reviewslist[i][m]['title']))) {
                    this.finalist.push(res[i][m])
                    this.finalist.sort(function(a,b) {return (a['like_count'] > b['like_count']) ? 1 : ((b['like_count'] > a['like_count']) ? -1 : 0);} );            
                  }
               }));
             }
           }
        console.log(this.finalist)
        // shows items in the right order
      }));

component.html:

<ion-content>
    <ion-grid>
      <ion-row *ngFor="let item of finalist | keyvalue">
        <ion-col>
          <img [src]="item?.value.image">
        </ion-col>
        <ion-col size="3">
          <p>{{item?.value.title | titlecase}}</p>
        </ion-col>
        <ion-col size="9">
          <p>| N. of votes: {{item?.value.like_count}}</p>
        </ion-col>
     </ion-row>
   </ion-grid>
</ion-content>

экранов (слева направо):

screen1 screen2

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...