我应该如何在不同的组件中显示我检查的结果？

Question

我有两个名为 slack 和 teams 的复选框。如果我选中 slack，我希望 slack 图像显示在不同的组件上。我几乎成功了，但它显示了松弛和团队。请看看我的图片，您可能会知道我想问什么

但结果是

html（第二部分）

<div aria-multiselectable="true" class=" card-collapse border p-3 mb-4" id="accordion" role="tablist" *ngFor="let data of slackNteamsData">
      <div class=" py-3" *ngIf="data.config_code == 'slack'">
        <div class=" collapsed" id="headingOne">
          <div class="d-flex align-items-center" aria-controls="collapseOne" data-parent="#accordion" [attr.aria-expanded]="!collapseOne"
          data-toggle="collapse" (click)="collapseOne = !collapseOne" id="collapseOne" href="#pablo">
            <div class="pr-3 slack-img">
              <img src="{{ asseturl('/images/slack-img.png') }}" alt="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 class=" py-3" *ngIf="data.config_code == 'teams'">
        <div class="collapsed" id="headingTwo">
          <div class="d-flex align-items-center" aria-controls="collapseTwo" data-parent="#accordion" [attr.aria-expanded]="!collapseTwo"
          (click)="collapseTwo = !collapseTwo" id="collapseTwo" href="#pablo">
            <div class="pr-3 slack-img">
              <img src="{{ asseturl('/images/teams-ms.png') }}" alt="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>

这是我的回复：

[{
    id: 193,
    config_code: "teams",
    config_value: "false"
},
{
    id: 194,
    config_code: "stack",
    config_value: "true"
},
{
    id: 195,
    config_code: "stack",
    config_value: "true"
},
{
    id: 196,
    config_code: "teams",
    config_value: "false"
}]

Answer 1

获取所有具有 config_value 作为 'true'（响应中的字符串）并且区别于 config_code

的项目

this.response = this.response.filter(item => item.config_value ==='true');

this.response = [...new Set(this.response.map(item => item.config_code))]
.map(i => this.response.find(item => item.config_code == i));

我应该如何在不同的组件中显示我检查的结果？

How should I display my checked results in different component?

arrays

checkbox

duplicates

angular