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

Question

我需要一些帮助，但出于某种原因我想不出如何解决它

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

循环遍历这些对象

我想添加 class 绑定到数组中的字段（描述详细信息），但我不希望每个 'Detailed Description'

都发生该操作我正在与。不确定这是否可能。希望我说得有道理。

目前，当我扩展 'Detailed Description' 每个具有 'Detailed Description' 的对象也会扩展（不希望发生这种情况）！

------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。因此，您只会打开 row/item 的详细信息。

举个例子

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>

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

Class Binding when applying it to a *ngFor for an element

typescript

ngfor

angular