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

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;

}

标签： angulartypescriptngfor

Answer 1

尝试这个

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