angular2我怎么可以只选择.clicked DOM元素

问题描述 投票:0回答:1

我在角世界是新的。不久,我有一个项目的名单,我希望当我点击列表中的某一项目的类此单击项目的唯一改变到同一类的其他不是所有的孩子

<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';
    }
}
angular
1个回答
2
投票

由于存在的细节数组,你要选择一个或多个,你不能处理与一个标志。您将需要一个isClicked标志的每一个细节。一个可能的解决方案如下。

classNamereact,不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
}
© www.soinside.com 2019 - 2024. All rights reserved.