我有一个类型为数字的值，如何通过在角度中使用 ngFor 进行迭代来减小它的值？

Question

我有一个类型为number的值，我想通过使用ngFor迭代来减少它的值。

<div *ngFor="let i of j">
{{i}}
</div>

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 i of j | reverse">
{{i}}
</li>

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

Answer 2

'i of j'意味着j是一个集合，而不是一个数字，所以不能这样减少它。

假设你的意思是想"倒计数"，你可以在组件中的j上调用reverse((，或者使用管道，就像用户3146157的答案一样(原始https://stackoverflow.com/a/35703364/9169359)。但是，由于听起来你想线性减少j，它必须是一个集合，所以你可能可以从一开始就重新排序j的内容，而不需要额外的调用。

如果你希望减少的不是j或i，而是你没有提到的组件中的其他东西，你可以在花括号之间调用一个方法来编辑这个值：

html

<div *ngFor="let i of j">
{{updateX()}}
</div>

组件

...
j = [1,2,3,4,5]
x = 12;
updateX(){
return this.x -= 1;
}
...

但您可能会得到一些奇怪的结果，因为Angular的生命周期挂钩会调用update的次数比您预期的要多。例如，在本例中，将x设置为12会导致打印5,4,3,2,1。

Answer 3

您可以执行以下

<div *ngFor="let i of j.slice().reverse()">
{{i}}
</div>