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

Question

我有一个元素数组（在我的例子中名为 "nodes"），我将它们加载到 table.

中

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

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

在每个节点中，我都有这些元素属性，正如您从图片中看到的那样：

[![JSON 回复][1]][1]

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

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

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

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

像这样：

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

Answer 1

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

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

并在 HTML 中使用它 *ngIf:

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

Answer 2

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

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

Check if array contains at least one element - Angular