11

Angular 2 でのフィルタリングと順序付けについて何かを学ぼうとしています。適切なリソースが見つからないようで、インデックスを使用して ngFor 出力を逆順に並べ替える方法に行き詰まっています。次のパイプを書いたところ、関数ではなく配列スライスというエラーが発生し続けます。

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(arr) {
        var copy = arr.slice();
        return copy.reverse();
    }
}

私のngforは次のようになります。

<div class="table-row generic" *ngFor="let advert of activeAdverts | reverse let i = index;" [attr.data-index]="i" (click)="viewAd(advert.title)">      
    <div class="table-cell white-text">{{ i+1 }}</div>                    
    <div class="table-cell white-text">{{advert.title}}</div>
    <div class="table-cell green-text">{{advert.advert}}</div>
</div>
4

7 に答える 7

11

このような一般的なユース ケースでは、ng-pipes モジュールのリバース パイプを使用することをお勧めします: https://github.com/danrevah/ng-pipes#reverse-1

ドキュメントから:

コントローラーで：

this.items = [1, 2, 3];

ビューで：

<li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->
于 2016-12-24T17:46:02.343 に答える
4

次の方法を使用すると、出力を逆にすることができますが、元の配列は変更されません。

 <tr *ngFor="let advert of activeAdverts; let i = index" >
           <td>{{activeAdverts[activeAdverts.length-i-1]}}</td>
  </tr>
于 2017-07-08T09:47:19.433 に答える
0

Lodashリバースは私にとってはうまくいきました。

import { reverse} from "lodash";

this.cloudMessages = reverse(this.cloudMessages)
于 2019-05-24T13:23:54.527 に答える