倒角2 * ngFor [英] Invert Angular 2 *ngFor

问题描述

<li *ngFor="#user of users ">
    {{ user.name }} is {{ user.age }} years old.
</li>

是否有可能将ngFor项倒置添加?

Is it possible to invert the ngFor that the items are added bottom up?

推荐答案

您需要实现一个利用JavaScript数组反向方法的自定义管道:

You need to implement a custom pipe that leverage the reverse method of JavaScript array:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'reverse' })

export class ReversePipe implements PipeTransform {
  transform(value) {
    return value.slice().reverse();
  }
}

您可以这样使用它:

<li *ngFor="let user of users | reverse">
    {{ user.name }} is {{ user.age }} years old.
</li>

不要忘记将管道添加到组件的管道属性中.

Don't forget to add the pipe in the pipes attribute of your component.

这篇关于倒角2 * ngFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！