Angular 2+：使用 onclick 更改属性

Posted 2023-02-22

【中文标题】Angular 2+：使用 onclick 更改属性

【英文标题】：Angular 2+: change attribute with onclick

【发布时间】：2018-06-20 17:49:42

【问题描述】：

我有一个带有 mat-raised-button 属性的按钮

<button mat-raised-button (click)="function()">My Button</button>

我想用我的函数添加或删除 mat-raised-button 属性。 有没有办法做到这一点？还是我需要更改 CSS？

【问题讨论】：

在这里回答：***.com/questions/44597077/…

【参考方案1】：

您只需 1 个按钮即可实现此目的。

<button class="btn btn-sm" [attr.mat-raised-button]="attributeCondition ? '': null" (click)="changeAttributeCondition()">Button</button>

将属性设置为 null 将删除该属性 用空白设置属性，只需添加该属性 用任意值设置属性，设置属性

参考：Discussion over here

【参考方案2】：

您可以使用两个不同的按钮，并且使用 *ngIf 根据您的情况，您一次只能显示一个。

<button mat-button (click)="function()" *ngIf="!isCondition">My Button</button>
<button mat-raised-button (click)="function()" *ngIf="isCondition">My Button</button>

希望对您有所帮助。

【讨论】：

完美，效果很好，我应该早点考虑的^^'