Angular 2：ngFor在下降顺序中

Question

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

每次用户点击按钮时，都会向该阵列添加一个新项目。

此数组以这种方式显示在ngFor循环中：

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

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

如何用角度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属性中。