如何在Angular2中更改表的动态行的类别

我有一张angular2的动态表

<table>
<tbody>
 <tr *ngFor="let dataList of dataLists; let i = index" [attr.data-index]="i">
<td>{{dataList.Name}}</td>
<td><div (click)="onClick(i)"><span class="glyphicon"  [ngClass]="{'glyphicon-chevron-up': opendPanel , 'glyphicon-chevron-down': !opendPanel }"></span></div></td>
</tr>
 </tbody>
</table>

{{dataList.Name}

最后一列是向下箭头（glyphicon V形向上），单击时应更改为（glyphicon V形向下）

---

我的问题是，单击“所有行”图标后会发生更改。我只想更改选定行的图标。

您使用的是单个布尔变量opendPanel。这就是更改其值会影响表中所有其他行的原因

要完成任务，您可以在数据列表对象中使用新属性，并按如下方式使用它：

<table>
  <tbody>
    <tr *ngFor="let dataList of dataLists; let i = index" [attr.data-index]="i">
    <td>{{dataList.Name}}</td>
    <td><div (click)="onClick(i,dataList)"><span class="glyphicon"  [ngClass]="{'glyphicon-chevron-up': dataList.opendPanel , 'glyphicon-chevron-down': !dataList.opendPanel }"></span></div></td>
   </tr>
</tbody>
</table>

{{dataList.Name}

在组件端，在onClick事件中设置dataList.opendPanel的值

---

希望能有帮助

您需要每行的状态。向

dataList

添加一个proeprity，或向组件添加另一个与

dataList

大小相同的数组，然后使用

dataList.selected

或

myArray[i]

存储图标的状态。如果由

*ngFor

创建的所有图标只有一个状态，则它们都需要具有相同的状态。