使用 ngFor 循环时确保数组不为空

Question

我需要在 table 中显示数组中的数据。什么条件可以保证数组为空时不被迭代？

<tr *ngFor="let something of (adunit.unit_price)">
<td>{{something.updated_date | date : 'medium' }}</td>
<td>{{ something.value }}</td>

Answer 1

您可以将 table 包裹在 *ngIf

中

<table *ngIf="adunit.unit_price.length">
  <tr *ngFor="let something of (adunit.unit_price)">
  <td>{{something.updated_date | date : 'medium' }}</td>
  <td>{{ something.value }}</td>
  </tr>
</table>

Answer 2

您无需担心迭代，因为 Angular 会为您处理。如果数组为空，则不会迭代。

Answer 3

我要添加一个 Elvis 运算符，它将首先检查父变量是否存在。像这样：

<tr *ngFor="let something of adunit?.unit_price">
<td>{{something.updated_date | date : 'medium' }}</td>
<td>{{ something.value }}</td>

使用 ngFor 循环时确保数组不为空

Ensure array isn't empty when looping with ngFor

typescript

ngfor

angular