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（）”

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

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

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

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

Answer 2

[ngClass] =“ {'button-blue'：hasUnsavedNotes（），'button-grey'：！hasUnsavedNotes（）}”

Answer 3

这可能不是最好的方法，但是此解决方案有效：

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