Question

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

是否可以将ng替换为自下而上添加的项目？

Answer 1

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

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>

不要忘记在组件的pipes属性中添加管道。

Answer 2

您可以在数组上使用JavaScript的.reverse()。不需要角度特定的解决方案。

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

在此处查看更多信息： https://www.w3schools.com/jsref/jsref_reverse.asp

Answer 3

这应该可以解决问题

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

Answer 4

所选答案有两个问题：

首先，管道不会注意到源数组修改，除非您将"éx⁂"添加到管道的属性中。

第二，管道不支持双向绑定，因为数组的副本是反向的，而不是数组本身。

最终代码如下：

pure: false

Plunker

http://plnkr.co/edit/8aYdcv9QZJk6ZB8LZePC?p=preview

Answer 5

<强>更新

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe {
  constructor(private differs:IterableDiffers) {
    this.differ = this._differs.find([]).create(null);
  }

  transform(value) {
    const changes = this.differ.diff(value);
    if(changes) {
      this.cached = value.slice().reverse();
    }
    return this.cached;    
  }
}

默认情况下，Angular在向数组添加项目或从数组中删除项目时不会调用管道，因为默认情况下Angular更改检测仅比较数组实例更改。

为了在每次调用更改检测时调用管道，我使管道不纯净。不经常会调用不纯的管道，因此高效工作非常重要。创建一个数组的副本（甚至可能是一个大型数组），然后颠倒它的顺序是非常昂贵的。

因此，如果识别出某些更改，则仅执行实际工作，否则返回上一次调用的缓存结果。

<强>原始

您可以创建一个自定义管道，以相反的顺序返回数组，或者只是以相反的顺序提供数据。

另见

Answer 6

尝试：

<ul>
  <li *ngFor="let item of items.slice().reverse()">{{item}}</li>
</ul>

Answer 7

一个人可以使用ngx-pipes

npm install ngx-pipes --save

模块

1111 1111

组件

import {NgPipesModule} from 'ngx-pipes';

@NgModule({
 // ...
 imports: [
   // ...
   NgPipesModule
 ]
})

然后在模板@Component({ // .. providers: [ReversePipe] }) export class AppComponent { constructor(private reversePipe: ReversePipe) { } }中使用

Answer 8

使用transform需要PipeTransform：

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

@Pipe({
  name: 'reverse',
  pure: false
})

export class ReversePipe implements PipeTransform {
  transform (values: any) {
    if (values) {
      return values.reverse();
    }
  }
}

使用<div *ngFor="let user of users | reverse">

进行调用

Answer 9

您可以使用javascript函数来做到这一点。

<li *ngFor="user of users?.slice()?.reverse()">
    {{ user.name }} is {{ user.age }} years old.
</li>

Answer 10

如果有人在使用打字稿，我可以使用@GünterZöchbauer的答案设法让它工作。

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe implements PipeTransform {

  differs: any
  cashed: any
  constructor(private _differs: IterableDiffers) {
    this.differs = this._differs.find([]).create(null);
  }
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value, ...args) {
    const changes = this.differs.diff(value)
    if (changes) {
      this.cashed = value.slice().reverse();;
    };
    return this.cashed
  }
}

Answer 11

在模板中使用.slice().reverse()的解决方案简单有效。但是，使用迭代索引 时，您应该小心。

这是因为.slice()方法为视图返回了一个新数组，因此我们的初始数组不变。问题在于，反向数组也具有反向索引。

因此，如果要将索引用作变量，还应该反向索引。示例：

<ul>
  <li *ngFor="let item of items.slice().reverse(); index as i" (click)="myFunction(items.length - 1 - i)">{{item}}</li>
</ul>

在上面，我们使用颠倒的i而不是items.length - 1 - i，以便使单击的项目对应于初始数组的相同项目。

检查此堆叠闪电： https://stackblitz.com/edit/angular-vxasr6?file=src%2Fapp%2Fapp.component.html

反转角度2 * ngFor

11 个答案:

Plunker