Javascript 角度2 ngFor-使用索引的输出顺序相反

尝试学习Angular 2中的过滤和排序。我似乎找不到任何合适的资源，而且我一直在研究如何使用索引按相反顺序为输出排序。我已经编写了下面的管道，它不断给我错误，数组切片不是一个函数

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

{{i+1}}
{{广告标题}
{{广告.广告}

对于此类常见用例，我建议您使用ng pipes模块中的反向管道：

从文档中：

在控制器中：

他认为：

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

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

{{activeAdverts[activeAdverts.length-i-1]}

我能让它工作的最简单的方法就是使用

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+1}}
{{广告标题}
{{广告.广告}

我还要添加

.slice（）

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

---

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

{{advert.p}
{{advert.q}
...

为我工作

import { reverse} from "lodash";

this.cloudMessages = reverse(this.cloudMessages)

用这个

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

---

如果你有错误，请在你的问题中分享。你有语法错误吗？我想你需要添加

If（！ar）return

以在传递

null

时不获取错误。数组中肯定有项。当我从ngfor中移除管道时，我得到输出。。我看到的错误是切片不是函数或反转不是函数。你需要在“反转”后面加一个分号。哇！即使使用firebase可观察列表，它也能工作！这对我有用。但是，我不明白你所说的“索引取消引用在规模上是不可读的”是什么意思。你能帮我解释一下吗。谢谢，没问题。所有示例仅显示了几个表格单元格。但这并不现实。如果有10个，20个呢？如果您必须在每个页面中编写

activeAdverts[activeAdverts.length-i-1]

，您的模板将很快变得不可读。

*ngIf

的

as

关键字使用不足，但对于创建局部变量以及使用

*ngIf

表达式对其赋值非常有用。因此，在我的示例中，您只需要编写一次冗长的索引解引用。啊！抓住你了。非常感谢！：）@如果我动态推送活动广告呢？为什么在这里使用slice（）？如果我们不执行slice（），会发生什么？Reverse（）在适当的位置工作。这意味着，它将更改原始数组。不带参数的切片返回activeAdverts的副本，所以在本例中，原始数组保持不变。

import { reverse} from "lodash";

this.cloudMessages = reverse(this.cloudMessages)

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