Question

我需要一些帮助，由于某种原因，我无法解决该问题

我有一个对象数组，正在使用* ngFor和

我想将类绑定添加到我数组中的一个字段（描述详细信息），但是我不希望对每个“详细描述”执行该操作

一起工作。不知道这是否可能。希望我有道理。

当前，当我展开“详细说明”时，每个具有“详细说明”的对象也会展开（不希望发生这种情况）！

------ HTML -----------

<div *ngFor="let n of Entry">
        <ul class="list-group">
         <li>
          <p class="description"> Detailed Description
           <span class="glyphicon" [class.glyphicon-minus- 
           sign]="expandedDetails" [class.glyphicon-plus- 
           sign]="!expandedDetails" (click)="toggleDetails()"></span>
            </p>
            <span class="entryDetails" *ngIf="expandedDetails == true"> 
             {{n.description}}</span>

--------- TS ----------------------

toggleDetails() {
this.expandedDetails = !this.expandedDetails;

}

Answer 1

您要在for-each上使用trackby $ index，然后可以使用此值传递到toggleDetails。因此，您将只打开该行/项目的详细信息。

让我举个例子

Answer 2

尝试一下

在ts文件中定义切换变量

 toggle=[]

在您的html中像这样修改代码

<div *ngFor="let n of Entry;let i =index">
        <ul class="list-group">
         <li>
          <p class="description"> Detailed Description
           <span class="glyphicon" [class.glyphicon-minus- 
           sign]="expandedDetails" [class.glyphicon-plus- 
           sign]="!expandedDetails" (click)="toggle[i]=toggle[i]  "></span>
            </p>
            <span class="entryDetails" *ngIf=" toggle[i]"> 
             {{n.description}}</span>

将其应用于元素的* ngFor时的类绑定

2 个答案: