Как я должен отображать свои проверенные результаты в другом компоненте?

#arrays #angular #checkbox #duplicates

Вопрос:

У меня есть два флажка под названием slack и команды. Если я проверю 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"
}]

1. Не могли бы вы объяснить, что вы пробовали, с помощью кодов?

2. Да,конечно,я добавлю туда свой код, очень длинный код. Я объясню здесь. Я создал форму в одном компоненте и разместил ее, установив значения true или false. И в другом компоненте,используя вызов get, я возвращаю эти изображения, используя условие ngif

3. Я добавил код getcall там

4. поделитесь своим ответом api.

5. Конечно, я добавил выше.

Ответ №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));