Angular如何根据元素id实现动态列表项的显隐切换功能

以下提供两种实现方式，可根据需求选择：

方案1：数据驱动实现（推荐，符合Angular设计规范） #

无需操作DOM，通过维护状态变量控制显隐，性能更稳定，不会和框架变更检测逻辑冲突。

步骤1：修改TS组件代码 #

在组件类中新增状态变量存储需要显示属性的车辆ID，以及切换方法：

// 新增状态：存储当前需要显示属性的车辆ID集合
visiblePropertyIds: Set<number> = new Set();

// 切换显隐方法
toggleProperty(vehicleId: number): void {
  if (this.visiblePropertyIds.has(vehicleId)) {
    this.visiblePropertyIds.delete(vehicleId);
  } else {
    this.visiblePropertyIds.add(vehicleId);
  }
}

步骤2：修改HTML模板代码 #

给属性容器加*ngIf指令绑定状态，按钮绑定切换方法：

<div *ngFor="let vehicle of vehicles">
    {{vehicle.id | json}}
    {{vehicle.type| json}}
    {{vehicle.brand| json}}
    {{vehicle.model| json}}

    <button (click)="toggleProperty(vehicle.id)">Toggle Properties</button>

    <div *ngIf="visiblePropertyIds.has(vehicle.id)">
            Vehicle Properties
            <br>
            {{vehicle.properties | json}}
    </div>
</div>

方案2：按ID操作DOM实现（符合最初的思路，不推荐） #

如果一定要通过元素ID直接操作DOM实现，直接在TS组件中实现如下方法即可：

fn(vehicleId: number): void {
  const targetElement = document.getElementById(`prop${vehicleId}`);
  if (!targetElement) return;
  // 切换显隐状态
  targetElement.style.display = targetElement.style.display === 'none' ? 'block' : 'none';
}

注意：直接操作DOM可能在列表动态增删、路由切换等场景下出现内存泄漏或者状态异常，优先选择方案1。

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