有條件的運算符不能用於ngStyle

Question

我正在通過Angular4 ngStyle的教程進行工作。

我有以下代碼：

app.component.html

<button 
    [ngStyle]="{ 
    'backgroundColor': canSave ? 'blue': 'gray', 
    'color': canSave ? 'white': 'black', 
    'fontWeight': canSave ? 'bold': 'normal' 
    }" 
> 
    Save 
</button> 

app.component.ts

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    canSave = 'false'; 
} 

無論canSave是真的還是假的，我得到這個：

和控制檯看起來是這樣的：

我不明白爲什麼這不起作用！有條件的三元運算符似乎沒有任何區別。我的語法錯了嗎？我直接從教程複製它，它似乎在其他情況下工作？

Answer 1

canSave應該是一個布爾值不是一個字符串 這樣的：

canSave = false; 

不是

canSave = 'false';