唯一由ngFor识别生成列表项(uniquely Identify list item genera

我使用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;
}

文章来源: uniquely Identify list item generated by ngFor