Angular 2 ngFor-使用索引的输出逆序

Question

试图学习有关在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>

Answer 1

对于此类常见用例，我建议您使用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] -->

Answer 2

我想补充.slice()以及

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

Answer 3

我认为@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>