Angular表格经过滤管道仅返回单行时如何自动触发行click事件？

需求完全可实现，不推荐直接判断tr是否为父元素唯一子节点的DOM操作方案，不符合Angular数据驱动的设计思想，后续如果新增空状态行、加载行等节点时逻辑容易出错，优先用以下两种实现方案：

方案1：保留原有管道，基于模板变量+子元素查询实现 #

无需修改现有管道逻辑，仅需调整模板和添加少量组件代码：

1. 修改HTML模板，存储过滤结果为临时变量，给行元素添加模板引用

<tbody>
  <tr 
    #systemRow
    *ngFor="let system of filteredSystems = (systemData | tableFilter: systemSearchString)" 
    (click)="selectSystem(system)"
  >
    <td>{{system.id}}</td>
    <td>{{system.number}}</td>
    <td>{{system.name}}</td>
  </tr>
</tbody>

2. 组件类中监听行元素数量变化，长度为1时自动触发选择逻辑

import { ViewChildren, QueryList, AfterViewInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class YourComponent implements AfterViewInit, OnDestroy {
  // 查询所有行元素
  @ViewChildren('systemRow') systemRows: QueryList<any>;
  private destroy$ = new Subject<void>();
  systemData: TableItem[] = [];
  systemSearchString = '';
  // 存储过滤后的结果
  filteredSystems: TableItem[] = [];

  ngAfterViewInit() {
    // 监听行数量变化
    this.systemRows.changes
      .pipe(takeUntil(this.destroy$))
      .subscribe(rows => {
        if (rows.length === 1) {
          // 直接调用选择方法，无需模拟点击事件
          this.selectSystem(this.filteredSystems[0]);
        }
      });
  }

  selectSystem(system: TableItem) {
    // 原有点击事件的业务逻辑
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案2：纯数据驱动实现（更推荐，性能更优） #

把过滤逻辑抽离复用，直接通过数据变化判断，完全不需要操作DOM：

1. 抽离公共过滤逻辑，管道复用该逻辑

// 公共过滤方法，管道和组件都可以调用
export function tableFilter(list: TableItem[], value: string): TableItem[] {
  return value ? list.filter(item => item.name.toLowerCase().includes(value.toLowerCase())) : list;
}

// 过滤管道调整为复用公共方法
export class TableFilterPipe implements PipeTransform {
  transform(list: TableItem[], value: string) {
    return tableFilter(list, value);
  }
}

2. 组件中监听搜索关键词变化，手动计算过滤结果

export class YourComponent {
  systemData: TableItem[] = [];
  systemSearchString = '';
  filteredSystems: TableItem[] = [];

  // 搜索框值变化时触发，也可以绑定到ngModelChange事件
  onSearchChange() {
    this.filteredSystems = tableFilter(this.systemData, this.systemSearchString);
    if (this.filteredSystems.length === 1) {
      this.selectSystem(this.filteredSystems[0]);
    }
  }

  selectSystem(system: TableItem) {
    // 原有点击事件的业务逻辑
  }
}

3. 模板调整示例

<!-- 搜索框绑定变化事件 -->
<input type="text" [(ngModel)]="systemSearchString" (ngModelChange)="onSearchChange()" placeholder="搜索系统">

<tbody>
  <!-- 直接循环过滤后的数组，也可以保留原有管道写法 -->
  <tr *ngFor="let system of filteredSystems" (click)="selectSystem(system)">
    <td>{{system.id}}</td>
    <td>{{system.number}}</td>
    <td>{{system.name}}</td>
  </tr>
</tbody>

关于DOM判断方案的说明 #

如果一定要通过判断DOM节点的方式实现也可以，通过document.querySelector('tbody').children.length判断子节点数量即可，但非常不推荐该方案：

• 不符合Angular数据驱动的设计规范
• 后续如果表格新增空状态提示行、加载行、固定表头行等节点，判断逻辑会直接失效
• 手动操作DOM容易引发不必要的变更检测问题，性能更差

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