Angular如何获取div列表中指定div的子元素实现点击状态切换

你当前所有列表项都绑定了同一个全局布尔变量sent控制显隐，只要这个变量值改变，所有绑定它的元素都会同步更新，才会出现点一个按钮所有项的图标都显示的问题。Angular的组件上下文逻辑和AngularJS不同，不能直接套用旧的this操作思路，需要给每个列表项维护独立的状态标记。

Angular处理重复列表的规范方式是用*ngFor指令做循环渲染，天然支持给每个列表项绑定独立状态，后续增删列表项也不需要重复写模板代码。

1. 首先在组件的ts文件中定义列表数据，给每个人员项增加独立的状态字段，同时修改点击事件逻辑，只更新当前点击项的状态：

// 组件类中定义
personList = [
  { name: 'Thomas Rak', avatar: '/assets/noprofile.jpg', isAdded: false },
  { name: 'John', avatar: '/assets/noprofile.jpg', isAdded: false }
];

onAddClick(index: number): void {
  // 仅修改当前点击项的状态
  this.personList[index].isAdded = true;
}

2. 在模板中用*ngFor循环渲染所有列表项，每个元素只绑定自身的状态字段：

<div class="item" *ngFor="let person of personList; let idx = index">
  <div class="imgNameDiv">
    <div class="imgName">
      <div class="img">
        <img [src]="person.avatar" alt="用户头像">
      </div>
      <div class="name">
        <i>{{ person.name }}</i>
      </div>
    </div>
  </div>
  <div>
    <!-- 当前项已添加时隐藏Add按钮 -->
    <i (click)="onAddClick(idx)" [hidden]="person.isAdded">Add</i>
    <!-- 当前项已添加时显示勾选图标，注意原代码的绑定逻辑写反了 -->
    <i [hidden]="!person.isAdded" class="fa fa-check" aria-hidden="true"></i>
  </div>
</div>

如果你暂时不想调整为循环渲染结构，也可以用对象存储每个项的独立状态，不需要全局共用单个变量：

1. ts文件中定义状态对象和点击方法：

// 每个key对应一个列表项的唯一标识
addStatus: Record<string, boolean> = {
  thomas: false,
  john: false
};

onAddClick(personKey: string): void {
  this.addStatus[personKey] = true;
}

2. 模板中每个项绑定对应key的状态：

<div class="item">
  <div class="imgNameDiv">
    <div class="imgName">
      <div class="img">
        <img src="/assets/noprofile.jpg" alt="用户头像">
      </div>
      <div class="name">
        <i>Thomas Rak</i>
      </div>
    </div>
  </div>
  <div>
    <i (click)="onAddClick('thomas')" [hidden]="addStatus.thomas">Add</i>
    <i [hidden]="!addStatus.thomas" class="fa fa-check" aria-hidden="true"></i>
  </div>
</div>

<div class="item">
  <div class="imgNameDiv">
    <div class="imgName">
      <div class="img">
        <img src="/assets/noprofile.jpg" alt="用户头像">
      </div>
      <div class="name">
        <i>John</i>
      </div>
    </div>
  </div>
  <div>
    <i (click)="onAddClick('john')" [hidden]="addStatus.john">Add</i>
    <i [hidden]="!addStatus.john" class="fa fa-check" aria-hidden="true"></i>
  </div>
</div>

注意：你原代码中勾选图标的[hidden]绑定逻辑写反了，sent为true时图标会被隐藏，和你想要的“点击后显示图标”效果完全相反，需要调整判断条件。

内容的提问来源于stack exchange，提问作者akhil Raj Kunwar