angular2如何仅选择.clicked DOM元素

我在一个棱角分明的世界里是新来的。 很快我就有了一个项目列表，当我点击列表中的某个项目时 此单击项的类仅更改为另一个类，而不是同一类的所有子类

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

---

由于存在一个详细信息数组，并且您希望选择一个或多个，因此无法使用单个标志来处理该问题。每个细节都需要一个

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>

---

由于存在一个详细信息数组，并且您希望选择一个或多个，因此无法使用单个标志来处理该问题。每个细节都需要一个

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>

---

嗨，我不明白你到底想要实现什么。但是，您似乎不喜欢在

tr

行上进行特定的单击。您应该将

（单击）

事件添加到所需的

td

。我说的对吗？不@AlbertoAM，他想对点击的行应用一个类，但现在它被应用到每一行。我想做的是trichetricheHi，我不明白你到底想要实现什么。但是，您似乎不喜欢在

tr

行上进行特定的单击。您应该将

（单击）

事件添加到所需的

td

。我说得对吗？不@AlbertoAM，他想对点击的行应用一个类，但现在它应用于每一行。我想为你的帮助做trichetrichethanks，但这对我不起作用，首先tr内容被隐藏，其次我只能选择项目，不能在其他项目之间切换请告诉我您的确切问题，以便我可以提供帮助。这在理论上应该是可行的。只有列表中的第一个项目现在可以选择，而另一个项目不是我让我的打字脚本isClicked=false；selectItem（detail）{detail.isClicked=！detail.isClicked；//…其他逻辑}我们不再使用isClicked变量。所以这不重要。将代码复制到stackblitz并创建一个可复制的错误。这是可行的，但仅适用于表中的第一个tr（项目）。不完全感谢您的帮助，但这对我不起作用，首先tr内容被隐藏，其次我只能选择项目，无法在其他项目之间切换。请告诉我您的确切问题，以便我可以提供帮助。这在理论上应该是可行的。只有列表中的第一个项目现在可以选择，而另一个项目不是我让我的打字脚本isClicked=false；selectItem（detail）{detail.isClicked=！detail.isClicked；//…其他逻辑}我们不再使用isClicked变量。所以这不重要。将代码复制到stackblitz并创建一个可复制的错误。这是可行的，但仅适用于表中的第一个tr（项），而不是全部

selectItem(detail){
   detail.isClicked = !detail.isClicked;
   //... other logic
}