web-dev-qa-db-ja.com

Angular 2 ngFor-インデックスを使用した出力の逆順

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>
javascriptangularangular2-pipe
7
Hamburgersn Heroin

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

DOCSから：

コントローラ内：

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

ビュー内：

<li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->
9
D_R

.slice()も追加します

*ngFor="let advert of activeAdverts.slice().reverse() let i = index;"
7
Chris Skura

@BhaskerYadavが最高の答えを出したと思います。元の配列を変更することは悪い考えであり、彼/彼女の考えには副作用、パフォーマンスなどはありません。私見では、インデックスの逆参照は大規模に読み取ることができないため、わずかな改善が必要です。

<tr *ngFor="let _ of activeAdverts; let i = index">
  <ng-container *ngIf="activeAdverts[activeAdverts.length-i-1] as advert">
    <td>{{advert.p}}</td>
    <td>{{advert.q}}</td>
    ...
  </ng-container>
</tr>
3
Mark Florence

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

 <tr *ngFor="let advert of activeAdverts; let i = index" >
           <td>{{activeAdverts[activeAdverts.length-i-1]}}</td>
  </tr>
2
BhaskerYadav

私がそれを機能させることができた最も簡単な方法は、activeAdverts.reverse()を使用することです。あなたの場合：

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

私はトリックを行うためにこの答えを見つけました

1
Pini Cheyni

これを使って

*ngFor="let item of items.slice().reverse()"
0
Trilok Singh

Lodash逆 うまくいきました。

import { reverse} from "lodash";

this.cloudMessages = reverse(this.cloudMessages)
0
Sampath