Question

我是一个新世界。很快我有一个项目列表，当我单击列表中的某个项目时我想要该单击项的类别仅更改为另一个，而不是同一类别的所有子类别

<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';
    }
}

Answer 1

由于有一系列详细信息，并且您想选择一个或多个，因此无法使用单个标志进行处理。每个细节都需要一个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
}

angular2如何仅选择.clicked DOM元素

1 个答案: