1. ホーム
  2. angular

インバートアングラー 2 *ngFor

2023-07-26 12:49:04

質問

<li *ngFor="#user of users ">
    {{ user.name }} is {{ user.age }} years old.
</li>

ngForを反転させて、アイテムを下から上に追加することは可能でしょうか?

どのように解決するのですか?

JavaScriptの配列のリバースメソッドを利用したカスタムパイプを実装する必要があります。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'reverse' })

export class ReversePipe implements PipeTransform {
  transform(value) {
    return value.slice().reverse();
  }
}

という風に使うことができます。

<li *ngFor="let user of users | reverse">
    {{ user.name }} is {{ user.age }} years old.
</li>

コンポーネントのpipes属性にパイプを追加することを忘れないでください。