Angular中检查数组是否至少包含一个元素的实现方法

嘿，我来帮你搞定这个Angular的表格生成和检查逻辑问题～

一、生成固定列数的表格 #

要实现固定列数的表格，我们可以先把一维的nodes数组按指定列数拆分成二维数组，再通过嵌套*ngFor来生成行和列，这样逻辑会更清晰。

组件逻辑（.ts文件） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-node-table',
  templateUrl: './node-table.component.html',
  styleUrls: ['./node-table.component.css']
})
export class NodeTableComponent {
  // 你的nodes数据源
  nodes = [/* 这里填入你的nodes数组内容 */];
  // 自定义固定列数，比如设为3
  fixedColumnCount = 3;

  // 将一维数组按固定列数分组为二维数组
  get groupedNodes() {
    const rowGroups = [];
    for (let i = 0; i < this.nodes.length; i += this.fixedColumnCount) {
      rowGroups.push(this.nodes.slice(i, i + this.fixedColumnCount));
    }
    return rowGroups;
  }
}

模板渲染（.html文件） #

通过两层*ngFor分别循环行和列，同时可以根据ScopeOfWork是否为空来控制内容显示：

<table class="node-table">
  <tbody>
    <!-- 循环生成每一行 -->
    <tr *ngFor="let row of groupedNodes">
      <!-- 循环生成每一列 -->
      <td *ngFor="let node of row" class="node-cell">
        <div class="node-name">{{ node.name }}</div>
        <!-- 仅当ScopeOfWork非空时渲染 -->
        <div *ngIf="node.ScopeOfWork?.length" class="scope-list">
          <span class="label">Scope of Work:</span>
          <ul>
            <li *ngFor="let workItem of node.ScopeOfWork">{{ workItem }}</li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

二、检查是否存在至少一个非空的ScopeOfWork #

我们可以通过组件内的计算属性或者自定义管道来实现这个判断，方便在模板中直接使用。

方法1：组件计算属性（推荐，适合单组件使用） #

在刚才的.ts文件中添加一个方法：

hasNonEmptyScope(): boolean {
  // 用some方法判断是否有至少一个node的ScopeOfWork非空
  return this.nodes.some(node => node.ScopeOfWork?.length);
}

然后在模板中就能直接用这个判断控制元素显示了：

<div *ngIf="hasNonEmptyScope()" class="hint">
  提示：存在至少一个包含工作范围的节点
</div>
<div *ngIf="!hasNonEmptyScope()" class="hint">
  提示：所有节点的工作范围均为空
</div>

方法2：自定义管道（适合多组件复用） #

如果多个组件都需要这个判断逻辑，可以写一个自定义管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'hasNonEmptyScope'
})
export class HasNonEmptyScopePipe implements PipeTransform {
  transform(nodes: any[]): boolean {
    // 处理空数组的情况，避免报错
    return nodes?.some(node => node.ScopeOfWork?.length) ?? false;
  }
}

记得在你的模块中声明这个管道，之后在模板里就可以这样用：

<div *ngIf="nodes | hasNonEmptyScope" class="hint">
  存在至少一个包含工作范围的节点
</div>

小提示 #

• 用node.ScopeOfWork?.length这种可选链语法，可以避免ScopeOfWork为undefined或null时的报错。
• 如果需要动态调整列数，只需要修改fixedColumnCount的值即可。
• 可以给表格添加CSS类来调整列宽、间距等样式，让表格更美观。

内容的提问来源于stack exchange，提问作者John Theoden