如何在Angular不同组件中展示Slack、Teams复选框勾选的对应结果

问题根源梳理 #

• 拼写错误：接口返回的Slack对应config_code值为stack，和你代码中判断的slack不匹配
• 缺少启用状态判断：现有*ngIf仅判断了配置类型，没有判断config_value是否为启用状态（true），只要存在对应类型的配置项就会渲染
• 遍历逻辑错误：你直接对全量配置数组做*ngFor遍历，数组内有4条配置项（2条teams、2条slack），会重复触发渲染逻辑
• 重复ID问题：代码中使用了固定的headingOne、collapseOne等ID属性，遍历后会生成重复ID，导致折叠面板交互异常

修复步骤 #

1. 先修正拼写问题 #

先要求接口提供方把Slack对应的config_code值从stack修正为slack，保证前后端配置字段一致。

2. 组件内预处理配置数据 #

在TS文件中拿到接口返回的数据后，先做去重、状态提取，不需要直接遍历原数组：

// 定义两个状态变量控制展示
isSlackEnabled: boolean = false;
isTeamsEnabled: boolean = false;

// 拿到接口返回数据后处理
processConfigData(data: any[]) {
  // 遍历所有配置项，提取对应开关的状态
  data.forEach(item => {
    if (item.config_code === 'slack') {
      // 只要有一条slack配置为true就标记为启用，也可以按你的业务逻辑调整判断规则
      this.isSlackEnabled = this.isSlackEnabled || item.config_value === 'true';
    }
    if (item.config_code === 'teams') {
      this.isTeamsEnabled = this.isTeamsEnabled || item.config_value === 'true';
    }
  })
}

3. 修改HTML渲染逻辑 #

去掉外层的*ngFor遍历，直接根据状态变量控制对应卡片的展示：

<div aria-multiselectable="true" class="card-collapse border p-3 mb-4" id="accordion" role="tablist">
  <!-- Slack卡片，仅启用时展示 -->
  <div class="py-3" *ngIf="isSlackEnabled">
    <div class="collapsed" id="headingSlack">
      <div class="d-flex align-items-center" aria-controls="collapseSlack" data-parent="#accordion" [attr.aria-expanded]="!collapseSlack"
      data-toggle="collapse" (click)="collapseSlack = !collapseSlack" id="collapseSlack" href="javascript:void(0)">
        <div class="pr-3 slack-img">
          <img src="{{ asseturl('/images/slack-img.png') }}" alt="Slack icon" >
        </div>
        <div>
          <strong class="d-block">Slack Integration</strong>
          <small class="text-muted">Get notified in Slack for new Backlog activity such as comments</small>
        </div>
        <a class="ml-auto" href="javascript:void(0)"><i class="tim-icons icon-minimal-down ml-auto"> </i></a>
      </div>
    </div>
  </div>

  <!-- Teams卡片，仅启用时展示 -->
  <div class="py-3" *ngIf="isTeamsEnabled">
    <div class="collapsed" id="headingTeams">
      <div class="d-flex align-items-center" aria-controls="collapseTeams" data-parent="#accordion" [attr.aria-expanded]="!collapseTeams"
      (click)="collapseTeams = !collapseTeams" id="collapseTeams" href="javascript:void(0)">
        <div class="pr-3 teams-img">
          <img src="{{ asseturl('/images/teams-ms.png') }}" alt="Teams icon" >
        </div>
        <div>
          <strong class="d-block">Teams Integration</strong>
          <small class="text-muted">Get notified in Teams for new Backlog activity such as comments</small>
        </div>
        <a class="ml-auto" href="javascript:void(0)"><i class="tim-icons icon-minimal-down ml-auto"> </i></a>
      </div>
    </div>
  </div>
</div>

如果你的业务确实需要遍历多个同类型配置，可以保留*ngFor，但要在遍历的时候同时判断config_value状态，并且给ID加上动态后缀避免重复：

<div aria-multiselectable="true" class="card-collapse border p-3 mb-4" id="accordion" role="tablist" *ngFor="let data of slackNteamsData; let i = index">
  <div class="py-3" *ngIf="data.config_code == 'slack' && data.config_value == 'true'">
    <div class="collapsed" id="headingSlack{{i}}">
      <div class="d-flex align-items-center" [attr.aria-controls]="'collapseSlack' + i" data-parent="#accordion" [attr.aria-expanded]="!('collapseSlack' + i)"
      data-toggle="collapse" (click)="this['collapseSlack' + i] = !this['collapseSlack' + i]" [id]="'collapseSlack' + i" href="javascript:void(0)">
        <!-- 内部内容不变 -->
      </div>
    </div>
  </div>

  <div class="py-3" *ngIf="data.config_code == 'teams' && data.config_value == 'true'">
    <!-- 同样修改ID为动态值，逻辑同上 -->
  </div>
</div>

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