ngfor отображает только первую строку. Он не печатает все строки

Question

Шаблон

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

здесь он печатает только первую строку на экране. Как мне go об этом

Answer 1

Попробуйте использовать это

<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;
  }

Answer 2

Я не думаю, что практично использовать pipe для сортировки при использовании 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);

Затем на странице. html,

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