Angular 2的ngFor——使用索引的反向输出顺序

Angular 2 ngFor - reverse order of output using the index

本文关键字：输出 顺序 索引 ngFor Angular      更新时间：2023-09-26

尝试学习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>

我还要加上.slice() 

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

对于这些常见的用例，我建议你使用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] -->

我认为@BhaskerYadav给出了最好的答案。改变原始数组是一个坏主意，他/她的想法没有副作用，性能或其他方面。IMHO，它只需要稍微改进，因为所有的索引解引用在规模上是不可读的。

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

使用下面的方法你可以反转输出，但是原始数组不会被修改，

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

使用

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

我能使它工作的最简单的方法是使用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>

我找到了这个答案。

Lodash reverse for me 

import { reverse} from "lodash";
this.cloudMessages = reverse(this.cloudMessages)

在ngFor上使用Angular默认的Reverse方法

<div class="table-row generic" *ngFor="*ngFor="let advert of activeAdverts.slice().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>
相关文章：