Angular 6 [ngClass] 不适用于 component.js 中的布尔值答案

【问题标题】：Angular 6 [ngClass] not working with boolean in component.jsAngular 6 [ngClass] 不适用于 component.js 中的布尔值
【发布时间】：2018-12-05 19:30:06
【问题描述】：

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

export class MainMenuComponent implements OnInit {
  ngState = false;
    constructor() {

  }
  newGame(){
    this.ngState = this.ngState === true ? false : true;
    console.log(this.ngState);
  }
}

下一个sn-p就是组件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

【问题讨论】：

一切似乎都很好。 newGame 函数是否被调用以将标志更改为真？你能提供带有 plunker 之类的代码 sn-p 吗？
我绝对可以尝试，但在 plunker 上看起来它只支持旧版本的 angular。我在命令控制台中使用“ng new my-app”创建了我的项目，所以我不确定如何在 plunker 或代码笔中重新创建它。我可能需要一些时间才能弄清楚这一点，因为它似乎并不支持我正在阅读的内容
你可以试试stackblitz。
是的。试试这个stackblitz.com/edit/angular-rdh8eh
你的 stackblitz 保存了吗？

标签： javascript angular ng-class

【解决方案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

【讨论】：

在发布我的问题之前，我尝试在隐藏时不引用引号
那么你为什么不投票，这在问题中没有提到！你能提供一个stackblitz吗
我没有投反对票，我认为其他人投了反对票。对不起。
你在 stackblitz 中制作了吗
会发生什么？