Angular 7中Mat-Icon的ID/名称分配及播放暂停切换逻辑实现问题

首先，我注意到你当前代码用了全局的run变量来控制图标显示，这会导致所有行的图标同步切换，而不是针对单个campaign生效。我们需要给每个campaign单独维护状态，这样点击某一行的图标只会影响该行的显示。

步骤1：在TS中维护每个Campaign的独立状态 #

我们可以在组件里创建一个对象来存储每个campaign的激活状态，避免直接修改原campaign对象（如果原数据来自接口，直接修改可能引发副作用）：

// 组件类内定义状态存储对象
campaignActiveStatus: { [key: number]: boolean } = {}; 
// key为campaign.id，value标记该campaign是否处于激活状态

occurrence(action: number, campaign: any) {
  // 初始化当前campaign的状态（如果未初始化过）
  if (this.campaignActiveStatus[campaign.id] === undefined) {
    this.campaignActiveStatus[campaign.id] = false; // 默认未激活，显示播放图标
  }

  // 根据点击的动作切换状态
  if (action === 1) {
    // 点击播放：标记为激活状态
    this.campaignActiveStatus[campaign.id] = true;
    // 这里可以添加激活campaign的业务逻辑，比如调用后端接口
    console.log(`激活campaign: ${campaign.id}`);
  } else if (action === 2) {
    // 点击暂停：标记为未激活状态
    this.campaignActiveStatus[campaign.id] = false;
    // 添加暂停campaign的业务逻辑
    console.log(`暂停campaign: ${campaign.id}`);
  }
}

如果允许直接修改campaign对象，也可以在获取到campaigns数据后，给每个campaign添加isActive属性：

// 假设你在获取campaigns数据的回调中添加
this.campaigns.forEach(campaign => {
  campaign.isActive = false; // 默认未激活
});

// 简化后的occurrence方法
occurrence(action: number, campaign: any) {
  if (action === 1) {
    campaign.isActive = true;
    // 业务逻辑...
  } else if (action === 2) {
    campaign.isActive = false;
    // 业务逻辑...
  }
}

步骤2：修改HTML模板适配独立状态 #

现在用每个campaign的专属状态控制图标显示，同时去掉重复的id（DOM中id必须唯一，重复会导致异常）：

<tr *ngFor="let campaign of campaigns">
  <td>{{ campaign.id }}</td>
  <td>{{ campaign.nome_campanha }}</td>
  <td>
    <label [ngClass]="status[campaign.status].color">{{ status[campaign.status].description }}</label>
  </td>
  <td>
    <!-- 播放图标：campaign未激活时显示 -->
    <mat-icon 
      class="row-click" 
      matTooltip="Ativar campanha" 
      (click)="occurrence(1, campaign)"
      *ngIf="!campaignActiveStatus[campaign.id]">
      play_circle_outline
    </mat-icon>
    <!-- 暂停图标：campaign激活时显示 -->
    <mat-icon 
      class="row-click" 
      matTooltip="Pausar campanha" 
      (click)="occurrence(2, campaign)"
      *ngIf="campaignActiveStatus[campaign.id]">
      pause
    </mat-icon>
  </td>
</tr>

如果是直接修改campaign对象的isActive属性，模板里的*ngIf改成*ngIf="!campaign.isActive"和*ngIf="campaign.isActive"即可。

额外优化建议 #

• 将id="row-click"改为class="row-click"，符合DOM规范（id不能重复）。
• 如果需要和后端同步状态，在occurrence方法中调用对应的激活/暂停接口，根据接口返回结果更新本地状态，确保前后端状态一致。
• 可以添加加载状态，比如点击图标后暂时禁用交互，直到接口请求完成，避免重复点击。

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