如何改變類表的dymanic行的Angular2

我有一個動態表angular2如何改變類表的dymanic行的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雪佛龍時），其上單擊要更改爲（ glyphicon-chevron-down）我的問題是一旦點擊了所有行圖標就改變了。我只想更改所選行的圖標。

來源

2017-02-16 Aruna

您需要每行的狀態。將一個proeprty添加到'dataList'中，或者將另一個數組添加到與dataLists相同大小的組件中，然後使用'dataList.selected'或'myArray [i]'來存儲圖標的狀態。如果您對'* ngFor'創建的所有圖標只有一個狀態，則它們都需要具有相同的狀態。 –

您正在使用單個布爾變量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值。

希望它有幫助！

來源

2017-02-16 06:22:12

如何改變類表的dymanic行的Angular2

回答

相關問題