Как показать только один компонент при нажатии здесь?

Question

Как я могу показать только одну деталь, когда нажимаю на заголовок. Прямо сейчас каждая деталь каждого элемента будет отображаться при клике.

<h1>Elements</h1>
<div *ngFor="let e of elements">
    <div (click)="switch = !switch">{{ element.name }}</div> <!-- Headline -->
    <app-details *ngIf="switch"></app-details> <!-- Details -->
</div>

Answer 1

Назначьте текущему index цикла ngFor свойству, а затем только покажите , что index .

<h1>Elements</h1>
<div *ngFor="let e of elements; let indx = index">
    <div (click)="show = indx">{{ element.name }}</div> <!-- Headline -->
    <app-details *ngIf="show === indx"></app-details> <!-- Details -->
</div>

Answer 2

Каждая деталь каждого элемента отображается, потому что вы используете только одну переменную switch и переключаете ее при каждом нажатии любого заголовка.

Вы должны однозначно идентифицировать заголовок, по которому вы щелкаете, и затем переключатьсятолько переключатель этого элемента.

В вашем компоненте создайте массив switches такой же длины, что и массив elements.

private switches: boolean[];

// After 'elements' data is available, initialize this array.
this.switches = new Array(elements.length).fill(false);

Измените *ngFor, включив в него индекс, и передайтеэтот индекс для функции обработчика события щелчка.

<h1>Elements</h1>
<div *ngFor="let e of elements; let i = index">
    <div (click)="toggle(i)">{{ element.name }}</div> <!-- Headline -->
    <app-details *ngIf="switches[i]"></app-details> <!-- Details -->
</div>

В функции обработчика события щелчка переключите переключатель только выбранного элемента.

toggle(index) {     
  // Toggle selected element's detail view.
  switches[index] = !switches[index];

  // Close any other opened detail views. 
  switches.map((val, i) => i === index ? val : false);
}