Скрыть Div (переключатель), когда другой открыт

Question

Я реализовал тумблер «система», который позволяет мне представлять или скрывать div с информацией.

Существует способ сохранить один активный тогл, то есть, я хочу, чтобы только один div отображался в время.

Я нажимаю на стрелку, чтобы активировать переключатель и отображать div, если я нажимаю на другую строку, предыдущая строка div скрыта, и я просто показываю текущий div.

DEMO

. html

<div *ngFor="let item of Items">
    <div class="d-flex flex-row divCamposEtxra">
        <div (click)="toggle(item)">
            <img *ngIf="item.shown" src="https://img.icons8.com/flat_round/64/000000/collapse-arrow--v1.png" style=" height: 30px;margin-right: 8px;"/>
            <img *ngIf="!item.shown" src="https://img.icons8.com/flat_round/64/000000/expand-arrow--v1.png"  style=" height: 30px;margin-right: 8px;"/>
     </div>
            <div>
                {{item.name}}
            </div>
            <div style="margin-left:auto;margin-right: 12px;">
                {{item.id}}
            </div>
        </div>
        <div class="d-flex flex-column" *ngIf="item.shown">
        <span>INFO</span>
    </div>
    </div>

.ts

   toggle(item) {
    item.shown = !item.shown;
  }

Проблема

Я просто хочу открыть один div за раз, если я нажимаю другой, предыдущий закрыто / скрыто.

Answer 1

Обновите следующим образом:

Компонент вашего приложения:

export class AppComponent  {
  current: number;
  Items=[{
    id:1,
    name:"name",
    shown: false
  },
  {
    id:2,
    name:"name2",
    shown: false
  },
  {
    id:3,
    name:"name3",
    shown: false
  }]

    toggle(item, i) {
    item.shown = !item.shown;
    this.current = i;

  }
}

HTML as:

<div *ngFor="let item of Items; let i = index">
    <div class="d-flex flex-row divCamposEtxra">
        <!-- <div (click)="toggle(item)"> -->
        <div (click)="toggle(item, i)">
            <img *ngIf="i == current && item.shown" src="https://img.icons8.com/flat_round/64/000000/collapse-arrow--v1.png" style=" height: 30px;margin-right: 8px;"/>
            <img *ngIf="i != current || (i == current && !item.shown)" src="https://img.icons8.com/flat_round/64/000000/expand-arrow--v1.png"  style=" height: 30px;margin-right: 8px;"/>
     </div>
            <div>
                {{item.name}}
            </div>
            <div style="margin-left:auto;margin-right: 12px;">
                {{item.id}}
            </div>
        </div>
        <div class="d-flex flex-column" *ngIf="current == i && item.shown">
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
    </div>
    </div>