ngfor 只显示第一行。它没有打印整行答案

【问题标题】：ngfor is displaying only the first row. It is not printing the entire rowsngfor 只显示第一行。它没有打印整行
【发布时间】：2020-11-25 06:30:59
【问题描述】：

模板

<div>
  <ion-list *ngFor="let log of logList|orderBy: order; let i=index">
    <ion-item>
      <p>Log entries: <b>{{log[i].sub}}</b></p>
    </ion-item>
  </ion-list>
</div>

这里只在屏幕上打印第一行。我该怎么办。

【问题讨论】：

添加orderBy管道代码...
请在此处打印logList数据

标签： angular ionic-framework angularjs-directive ionic3 ionic4

【解决方案1】：

我认为在使用 ngFor 时使用管道进行排序并不实用。而是在 page.ts 文件上对其进行排序。例如：

 const logList=[
  {'id':'1','sub':'A'},
  {'id':'3','sub':'C'},
  {'id':'4','sub':'D'},
  {'id':'2','sub':'B'},
];

logList.sort((a,b)=> a.id-b.id);

然后，在page.html中，

<div>
  <ion-list *ngFor="let log of logList">
    <ion-item>
      <p>Log entries: <b>{{log.sub}}</b></p>
    </ion-item>
  </ion-list>
</div>

【讨论】：

【解决方案2】：

试试这个

<div>
  <ion-list *ngFor="let log of logList; let i=index;trackBy:trackByIndex;">
    <ion-item>
      <p>Log entries: <b>{{log.sub}}</b></p>
    </ion-item>
  </ion-list>
</div>

在.ts中

 trackByIndex(index: number) {
    return index;
  }

【讨论】：