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

Question

我有一个元素数组（在我的例子中名为＆＃34; nodes＆＃34;）我将它们加载到表中。

该表具有固定数量的列，并根据该数组中的节点数生成行。例如：

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

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

[！[JSON回复] [1]] [1]

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

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

我需要这样做，因为我需要实现其他列，这些列将显示ScopeOfWork个元素（name，type..etc）的值。 如果节点中的SOW是空数组，那么它应该生成不同的表。

是否可以在此*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);
}

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

<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>