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给出了最好的答案。改变原始阵列是一个坏主意，他/她的想法没有副作用，性能或其他方面。恕我直言，它只需稍微改进，因为所有索引解除引用都是不可读的。

import re
pattern = re.compile(r'[^\w]')
r = sorted(['1 ', ' 9' , ' 4', '2 '], key= lambda s: pattern.sub('',s))

Answer 4

使用以下方法，你可以反转输出，但不会修改orignal数组，

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

Answer 5

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

I found this answer to do the trick

Answer 6

Lodash reverse为我工作。

import { reverse} from "lodash";

this.cloudMessages = reverse(this.cloudMessages)

Answer 7

使用此

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

Angular 2 ngFor - 使用索引

7 个答案: