Angular实现点击任务时高亮同一负责人的所有任务

原代码仅能修改点击的单个任务样式，未关联同一人员的其他任务，且直接操作DOM不符合Angular响应式开发逻辑。以下是优化后的实现方案：

修改后完整代码 #

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

@Component({
  selector: 'app-root',
  styles: [
    `
      .task-wrapper {
        display: flex;
        column-gap: 10px;
      }
      .task {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
        background-color: #ccc;
        padding: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
      }
      .task.highlighted {
        background-color: red;
      }
    `,
  ],
  template: ` <div class="task-wrapper">
    <div
      *ngFor="let task of tasks"
      class="task"
      [class.highlighted]="task.name === selectedOwner"
      (click)="selectOwner(task.name)"
    >
      <div>{{ task.name }}</div>
      <div>{{ task.task }}</div>
    </div>
  </div>`,
})
export class AppComponent {
  tasks = [
    { name: 'Max', task: 'Task 1' },
    { name: 'David', task: 'Task 2' },
    { name: 'Max', task: 'Task 3' },
    { name: 'David', task: 'Task 4' },
  ];

  selectedOwner: string | null = null;

  selectOwner(ownerName: string) {
    // 点击同一人员时切换高亮/取消高亮状态
    this.selectedOwner = this.selectedOwner === ownerName ? null : ownerName;
  }
}

关键修改说明 #

• 新增selectedOwner变量，用于记录当前选中的任务负责人，初始值null表示无选中状态。
• 使用Angular类绑定语法 [class.highlighted]="task.name === selectedOwner" 替代直接操作DOM：当任务所属人员与选中人员匹配时，自动添加highlighted类实现高亮。
• 点击事件简化为selectOwner(task.name)，仅传递负责人名称，方法内更新选中状态，支持点击同一人员切换高亮状态。
• 新增transition过渡效果，让高亮切换更平滑自然。
• 移除原有的@ViewChild和DOM操作代码，完全遵循Angular响应式开发模式，代码更易维护。

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