条件运算符不适用于 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';

条件运算符不适用于 ngStyle

Conditional operator not working on ngStyle

angular

conditional-operator