Question

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

最后一列是向下箭头（glyphicon-chevron-up），点击后应更改为（glyphicon-chevron-down）我的问题是，一旦点击，所有行图标都会被更改。我只想更改所选行的图标。

Answer 1

您正在使用单个布尔变量 opendPanel 。这就是为什么更改其值会影响表格的所有其他行。

要完成您的任务，您可以在 dataList 对象中使用新属性，并使用如下所示：

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

在组件方面，在onClick事件中设置 dataList.opendPanel 的值。

希望它有所帮助!!

如何在Angular2中更改表的dymanic行的类

1 个答案: