Question

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

reduce(counters, 0, (state, counter) -> state + counter['count'] , s -> s)

下一个代码片段是html组件

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

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

这是下面的隐藏类

<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>

当我将[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

Angular 6 [ngClass]无法在component.js中使用布尔值

1 个答案: