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

【问题标题】：Ensure array isn't empty when looping with ngFor使用 ngFor 循环时确保数组不为空
【发布时间】：2018-06-13 13:30:10
【问题描述】：

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

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

【问题讨论】：

如果为空，默认不会迭代。你不需要做任何事情。

标签： angular typescript ngfor

【解决方案1】：

您可以将您的表格包裹在 *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>

【讨论】：

可能不是 div 元素，因为您正在包装行。也许在table 或tbody 上？
@Fenton 真实，已修改

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：