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 回答
11

我也会.slice()补充

*ngFor="let advert of activeAdverts.slice().reverse() let i = index;"
于 2017-08-25T19:06:55.220 回答
6

我认为@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>
于 2018-05-24T21:42:14.963 回答
4

使用以下方法可以反转输出,但不会修改原始数组,

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

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

我找到了这个答案来解决问题

于 2017-08-23T05:10:39.147 回答
0

用这个

*ngFor="let item of items.slice().reverse()"
于 2020-04-01T14:51:24.380 回答
0

Lodash反向对我有用。

import { reverse} from "lodash";

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