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

显示每个元素的每个细节，因为您仅使用一个变量switch，并且在单击任何标题时都进行切换。

您必须唯一地标识要单击的标题，然后仅切换该元素的开关。

在组件中，创建一个长度为switches的数组elements。

private switches: boolean[];

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

修改*ngFor以包括索引，然后将此索引传递给click事件处理函数。

<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);
}

Answer 2

将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>

如何仅单击此处显示一个组件？

2 个答案: