Angular 4条件样式

Question

我有这个HTML代码，效果很好：

<button class="button-style standard-button button-blue" (click)="onOkClick()"
[ngClass]="{'disabled': !hasUnsavedNotes()}" [disabled]="!hasUnsavedNotes()">
Save and close
</button>

我的问题是，当hasUnsavedNotes（）返回false时，如何将class =“ button-style标准按钮button-blue”更改为class =“ button-style标准按钮button-grey”？或者只是禁用后如何更改按钮的后退颜色？谢谢。

Answer 1

您可以做一些小的调整：

<button 
    [class.button-blue]="!hasUnsavedNotes()"
    [class.button-grey]="hasUnsavedNotes()"
    class="button-style standard-button" 
    (click)="onOkClick()"
    [disabled]="!hasUnsavedNotes()">
    Save and close
</button>

[class.button-blue] =“！hasUnsavedNotes（）”

将添加button-blueCSS类时!hasUnsavedNotes()返回true，并会在删除此类!hasUnsavedNotes()的回报false。与以下内容相同：

[class.button-grey] =“ hasUnsavedNotes（）”

您可以根据需要删除[disabled]指令。

以下是在Angular中使用的“技巧”的有用列表：Angular-备忘单