javascript - 为什么数组实际上是排序的，但在 HTML 上看起来不同？

Question

我正在尝试对Observable获得的数组进行排序。我必须(this.myService.getReview(id))使用 res(id) 的属性进行 http 调用，并将此属性添加到res['like_count']. 最后我必须将 res 推入this.finalist数组中，这样我就可以在 HTML 代码中使用它。

我需要根据like_count价值对其进行排序，以正确的顺序显示项目。正如您在下面看到的，我尝试实现一种排序方法，但我不确定它是否处于正确的位置。

结果是项目的第一部分的顺序是正确的，但是在某个点上，顺序又是随机的，而如果我尝试console.log(this.finalist)顺序是正确的。

我可以尝试解决什么问题？是因为异步功能吗？谢谢

组件.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
      }));

组件.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>

屏幕（从左到右）：

标签： javascriptangulartypescriptionic-framework