唯一标识由ngFor生成的列表项

Question

我在Angular项目中使用dl，dt，dd和ngFor创建了一个列表和子列表。为了生成列表，我在我的组件中使用了一个数组。单击特定列表项时，我需要显示和隐藏每个子列表。但在这里，每个项目单击显示并隐藏每个子列表。我怎么解决这个问题？

码：

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AngularTest';
  arr = [
    {
        'id':1,'pid':0,'name':'Aaa','age':14
    },
    {
        'id':2,'pid':1,'name':'Bbb','age':14
    },
    {
        'id':3,'pid':1,'name':'Ccc','age':14
    },
    {
        'id':4,'pid':0,'name':'Ddd','age':14
    },
    {
        'id':5,'pid':4,'name':'Eee','age':14
    },
    {
        'id':6,'pid':4,'name':'Fff','age':14
    },
    {
        'id':7,'pid':2,'name':'Ggg','age':14
    },
    {
        'id':8,'pid':3,'name':'Hhh','age':14
    },
    {
        'id':9,'pid':0,'name':'Iii','age':14
    },
    {
        'id':10,'pid':0,'name':'Jjj','age':14
    },
  ];

show:boolean = false;

showme(){
    this.show = !this.show;
}

}

app.component.html：

<div>
    <dl *ngFor="let person of arr">
        <dt *ngIf="person.pid==0; then m"></dt>
        <ng-template #m>
            <dt (click)='showme()'>
                {{person.name}}
            </dt>
            <dl *ngFor="let child of arr">
                <dt *ngIf="child.pid==person.id; then s"></dt>
                <ng-template #s>
                    <dd *ngIf="show">
                        {{child.name}}
                    </dd>
                </ng-template>
            </dl>
        </ng-template>
    </dl>
</div>

Answer 1

使用索引值来标识这样的唯一元素

<div>
    <dl *ngFor="let person of arr;let i= index">
        <dt *ngIf="person.pid==0; then m"></dt>
        <ng-template #m>
            <dt (click)='toggle[i]=!toggle[i]'>
                {{person.name}}
            </dt>
            <dl *ngFor="let child of arr">
                <dt *ngIf="child.pid==person.id; then s"></dt>
                <ng-template #s>
                    <dd *ngIf="toggle[i]">
                        {{child.name}}
                    </dd>
                </ng-template>
            </dl>
        </ng-template>
    </dl>

例如：https://stackblitz.com/edit/unqiuediv

Answer 2

您需要在数组的每个对象中具有布尔值，而不是具有公共值。根据单击使用布尔值和disable/enable修改元素。

例

 {
   'id':1,'pid':0,'name':'Aaa','age':14,'show':false
 }

而模板将是，

<ng-template #m>
    <dt (click)='showMe(person)'>

在组件中，

showMe(person:any){
   person.show = !person.show;
}