检查数组是否包含至少一个元素 - Angular答案

【问题标题】：Check if array contains at least one element - Angular检查数组是否包含至少一个元素 - Angular
【发布时间】：2018-04-23 13:58:34
【问题描述】：

我有一个元素数组（在我的例子中称为“节点”），我正在将它们加载到一个表中。

该表具有固定数量的列和行是根据我在该数组中的节点数生成的。示例：

<div *ngFor="let node of nodes">

在每个节点中，我都有这些元素属性，如图所示：

[![JSON 响应][1]][1]

每个节点都有一个ScopeOfWork 数组，但有些可以为空，有些可以有元素。

我需要检查是否至少一个节点在其ScopeOfWork 中有元素，如果有，那么我想生成一个具有不同布局的不同表格。

我需要它，因为我需要实现额外的列，这些列将显示ScopeOfWork 的元素（名称、类型..等）的值。如果节点中的 SOW 是空数组，那么它应该生成不同的表。

是否可以在此 *ngFor 旁边设置该检查？

类似这样的：

<div *ngFor="let node of nodes && (check nodes.SOW-s for any element in their array)">

【问题讨论】：

【解决方案1】：

您可以使用array#some (docs) 创建一个评估该条件的函数：

checkIfScopeOfWork() {
  return this.nodes.some(item => item.scopesOfWork.length > 0);
}

并在*ngIf 内的 HTML 中使用它：

<div *ngIf="checkIfScopeOfWork()">
    <div *ngFor="let node of nodes">
   ...
<div *ngIf="!checkIfScopeOfWork()">
  ...something else....

【讨论】：

【解决方案2】：

Angular 不支持在一个元素中使用多个结构指令，请尝试使用 ng-container 来托管您的结构指令，如下所示：

<ng-container *ngFor="let node of nodes">
  <div *ngIf="node.scopesOfWork.length > 0">
     ...
  </div>
</ng-container>

【讨论】：