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 standard-button button-blue"更改为 class="button-style standard-button 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()"

将在 !hasUnsavedNotes() 返回 true 时添加 button-blue css 类，并在 !hasUnsavedNotes( )返回 false。相同于:

[class.button-grey]="hasUnsavedNotes()"

如果愿意，您可以删除 [disabled] 指令。

这里是一个有用的“技巧”列表，可以在 Angular 中使用:Angular - Cheat Sheet