Angular 2 : ngFor in descention order

Question

我有一个包含项目数组的组件。

每次用户点击一个按钮，一个新的项目添加到这个数组。

这个数组以这种方式在 ngFor 循环中显示:

    <li *ngFor="let log of Logs" class="list-group-item" [innerHTML]="log"</li>

现在，新日志显示在列表底部。我正在尝试的是使新日志显示在列表顶部。

如何使用 Angular 2 完成？

Answer 1

您可以为此创建自定义管道:

@Pipe({
  name: 'reverse'
})
export class ReversePipe {
  transform(arr) {
    var copy = arr.slice();
    return copy.reverse();
  }
}

(注意我创建数组的副本不是为了更新源数组)

并以这种方式使用它:

<li *ngFor="let log of Logs | reverse"
    class="list-group-item" [innerHTML]="log"</li>

不要忘记将此管道添加到您使用它的组件的 pipes 属性中。