Angular 6 [ngClass] 在组件.js中不使用布尔值

Question

我想做的是在ngState为真时隐藏文本。单击某个元素时，该状态将设置为 true。然后，[ngClass] 应添加隐藏类并隐藏文本。第一个代码片段来自 component.ts，它概述了布尔变量和将其设置为 true 的函数。

export class MainMenuComponent implements OnInit {
ngState = false;
constructor() {
}
newGame(){
this.ngState = this.ngState === true ? false : true;
console.log(this.ngState);
}
}

下一个代码段是组件 html

<canvas id='sparkCanvas'></canvas>
<div class="menuBox">
<div class="title" [ngClass]="{'hide': ngState}">Dark Shards</div>
<div class="optContainer">
<ul>
<li *ngFor="let opt of opts" class="{{opt.class}}" [ngClass]="{'hide': ngState}"  (click)="opt.f()">{{opt.n}}</li>
</ul>
</div>
</div>

这是下面的隐藏类

.hide{
opacity: 0;
}

当我将 [ngClass]="{'hide'：ngState}" 替换为 [ngClass]="{'hide'：true}"

然后，它将按预期工作。我在这里有什么不明白的？

这是一个指向我的代码的链接，其中包含一个工作示例： https://stackblitz.com/edit/angular-fg48ro?file=src%2Findex.html

Answer 1

尝试不Quote

<li *ngFor="let opt of opts" class="{{opt.class}}" [ngClass]="{hide: ngState}"  (click)="opt.f()">{{opt.n}}</li>

编辑

当我看到你的代码时，问题与角度无关，但对于javascript上下文，你需要指定这个上下文，比如

' f: this.newGame.bind(this),'

DEMO