Angular 2 ngFor - 使用索引的反向输出顺序答案

【问题标题】：Angular 2 ngFor - reverse order of output using the indexAngular 2 ngFor - 使用索引的反向输出顺序
【发布时间】：2017-03-29 20:20:55
【问题描述】：

尝试在 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>

【问题讨论】：

如果您遇到错误，请在您的问题中分享。
你有语法错误吗？
我猜你需要添加if(!ar) return; 以免在null 被传递时出错。
数组中肯定有项目。当我从 ngfor 中删除管道时，我得到了输出。我看到的错误类型是 slice 不是函数或 reverse 不是函数。
` | 后面需要一个分号反向`。

标签： javascript angular angular2-pipe

【解决方案1】：

使用这个

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

【讨论】：

【解决方案2】：

Lodash reverse 为我工作。

import { reverse} from "lodash";

this.cloudMessages = reverse(this.cloudMessages)

【讨论】：

【解决方案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>

【讨论】：

这对我有用。但是，不明白您所说的“索引取消引用在规模上是不可读的”是什么意思。你能帮忙解释一下吗。谢谢。
当然可以。所有示例仅显示几个表格单元格。但这不现实。如果有 10 个、20 个呢？如果你必须在每个中写activeAdverts[activeAdverts.length-i-1]，你的模板很快就会变得不可读。 *ngIf 的 as 关键字未得到充分利用，但非常适合创建局部变量 - 并使用 *ngIf 表达式对其进行分配。因此，在我的示例中，您只需要编写一次冗长的索引取消引用。
啊！得到你。万分感谢！ :)
@MarkFlorence 如果我动态推送 activeAdverts 怎么办？

【解决方案4】：

我也会添加.slice()

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

【讨论】：

为什么在这里使用 slice()？如果我们不做 slice() 会发生什么？
Reverse() 可以正常工作。这意味着，它将更改原始数组。没有参数的切片返回一个 activeAdverts 的副本，因此在这种情况下，原始数组保持不变。

【解决方案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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

【讨论】：

哇！即使使用 firebase Observable 列表，它也能正常工作！