0

我有一个在 ngFor 循环内的按钮。我是这样设计的。

<div *ngFor="let component of componentList;let index =index">
    <button type="button" id='Button{{index}}' name='Button{{index}}' class="device_name_button"  [ngClass]="{'greencolorstyle':component.status=='Available', 'redcolorstyle': component.status=='Faulted', 'graycolorstyle':component.status=='Unavailable','myClass':isClicked==true}" (click)="selectComponent($event,component.components);" > {{component.name}} </button>
</div>

我正在使用 click 事件处理程序设置isClicked = true 。

我的问题是，当我看到按钮上应用的样式时，单击后，我看到'device_name_button greencolorstyle myClass'。而点击它应该只有'device_name_button'和'myClass'。

当有人单击此按钮时，如何从此按钮中删除其他类？

4

2 回答 2

1

首先，有几个可能的解决方案。

  1. 您更新阵列中组件的状态。您的ngClass绑定将完成其余的工作。这是我的建议，因为这意味着您的视图仅取决于数据，但我知道改变数组中的元素并不总是那么容易。

  2. 您设置ngClass不同的条件，以便根据组件的状态和 isClicked 应用颜色类。

其次，您不应该在属性中使用字符串插值。您应该使用属性绑定：[id]="'Button' + index"。

于 2022-01-05T14:51:28.807 回答
0

我使用两步过程解决了它。首先，我创建了一个名为“custom-button”的自定义组件。我用自定义元素替换了 Html 中的按钮元素。通过这种方式，我可以处理数组的每个项目。然后我创建了另外三种样式，即“graywhitecolorstyle”、“greenwhitecolorstyle”和“redwhitecolorstyle”，超过了已经提到的三种样式。

接下来是自定义按钮组件的 html。

<div class="device_name_button"  matTooltipPosition="right"
[ngClass]="{'whiteredbackground':hardwareComponent.isClicked && 
hardwareComponent.status=='Faulted' 
,'greencolorstyle':hardwareComponent.status=='Available' && 
hardwareComponent.isClicked==false,'greenwhitecolorstyle':
hardwareComponent.status=='Available' && hardwareComponent.isClicked, 
'redcolorstyle': hardwareComponent.status=='Faulted' && 
!hardwareComponent.isClicked,
'graycolorstyle':hardwareComponent.status=='Unavailable' && 
!hardwareComponent.isClicked,'graywhitecolorstyle':
hardwareComponent.status=='Unavailable' && hardwareComponent.isClicked}"
(click)="selectHardware()" ><p>{{title}}</p>
</div>
于 2022-01-10T18:35:57.543 回答