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

您需要在数组的每个对象中都具有布尔值，而不是具有一个公共值。根据点击次数，使用布尔值和 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;
}

唯一标识ngFor生成的列表项

1 个答案: