如何在 *ngFor 中使用 .slice().reverse() 与 |核心价值？

Question

我经常在*ngFor中使用.slice().reverse()来倒序显示元素。但是现在我有一个问题，因为我也使用 |核心价值。如何使用 .slice().reverse() 与 |键值？

<div *ngFor="let order of orderData.order.slice().reverse() | keyvalue ">
   Sum: {{order.value.sum}} 
</div>

此解决方案有效，但出现错误：

Answer 1

我认为问题出在orderData.order，未定义。这就是它抛出该错误的原因。您可以确保 orderData.order 存在，然后像下面这样迭代列表。

注意：ng-container 只是一个包装器，Angular 没有将其放入 DOM。

<ng-container *ngIf="orderData.order">
  <div *ngFor="let order of orderData.order.slice().reverse() | keyvalue">
    Sum: {{order.value.sum}}
  </div>
</ng-container>

Answer 2

我认为您的问题不在于 keyvalue 管道。可能 orderData 在您尝试使用它时仍未加载并且 order 未定义。

您可以在模板中执行可选的 chaining/safe 导航运算符并添加 ?检查左侧的项目是否有此属性，如果有，则只有 returns，如果没有，则 returns 未定义，在这种情况下，如果订单是在管道转换方法中未定义为值，您将获得 undefined，如果它存在，您将获得数组。

<div *ngFor="let order of orderData.order?.slice()?.reverse() | keyvalue ">
   Sum: {{order.value.sum}} 
</div>

或者您可以只检查 orderData 是否具有订单数组，然后使用 ngIf 指令进行渲染。

我建议您不要像这样在模板内执行 slice().reverse()，因为在每个更改检测周期中您都将创建一个新数组并将其反转。最好创建一个名为 reverse 的新纯管道，它仅在实例发生更改时才反转数组，否则在处理更大的数组时可能会遇到麻烦。此外，如果您使用更大的阵列，提供 TrackByFunction on the ngFor 也会提高性能。

Answer 3

我们可以通过反向函数指定切片内的数字来获取数组的最后一个条目。

<div *ngFor="let order of orderData.order?.slice(-10)?.reverse() | keyvalue ">
   Sum: {{order.value.sum}} 
</div>

如何在 *ngFor 中使用 .slice().reverse() 与 |核心价值？

How to use .slice().reverse() in *ngFor with | keyvalue?

html

angular

reverse

ngfor