Angular 6 [ngClass]在component.js中不使用boolean

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] = “{ '隱藏'：ngState}”與[ngClass] = “{ '隱藏'： 真 }”

然后它將按預期工作。 我在這里不理解什么？

以下是我的代碼的鏈接，其中包含一個工作示例： 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>

編輯

當我看到你的代碼時，問題與angular無關，但是對於javascript上下文，你需要指定這樣的上下文

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

DEMO