我在角世界是新的。不久,我有一个项目的名单,我希望当我点击列表中的某一项目的类此单击项目的唯一改变到同一类的其他不是所有的孩子
<tr (click)='selectItem()' [className]="isClicked ? 'active-class' : ''" *ngFor="let detial of receiptDetails">
<td>{{detial.name}}</td>
<td>{{detial.qty}}</td>
<td> {{detial.Price}} </td>
<td> {{detial.Price * detial.qty}} </td>
<td> <button class='square_btn_x x-btn' (click)="removeDetail(detial)">X</button></td>
</tr>
我想点击该项目是在TR标签selectitem()
功能是,我想改变类active-class
功能
这是在组件我喜欢的类型的脚本代码
myStyle = {
'display':'none'
}
isClicked=false;
selectItem(){
this.isClicked=!this.isClicked;
if (this.myStyle.display==='none') {
this.myStyle.display='block';
} else if (this.myStyle.display==='block') {
this.myStyle.display='none';
}
}
由于存在的细节数组,你要选择一个或多个,你不能处理与一个标志。您将需要一个isClicked
标志的每一个细节。一个可能的解决方案如下。
和className
是react
,不angular
。你可以使用ngClass
或以下方法。
此外,不添加错别字的名字目的地。
<tr *ngFor="let detail of receiptDetails" (click)="selectItem(detail)" [class.active-class]="detail.isClicked" >
<td >{{detail.name}}</td>
<td>{{detail.qty}}</td>
<td> {{detail.Price}} </td>
<td> {{detail.Price * detial.qty}} </td>
<td> <button class='square_btn_x x-btn' (click)="removeDetail(detail)" >X</button></td>
</tr>
在TS,
selectItem(detail){
detail.isClicked = !detail.isClicked;
//... other logic
}