[英]Angular 6 [ngClass] not working with boolean in component.js
What I'm trying to do is hide text when ngState is true. 我想要做的是在ngState为真时隐藏文本。 When a certain element is clicked, that state is set to true. 单击某个元素时,该状态将设置为true。 The [ngClass] should then add the hide class and hide the text. 然后[ngClass]应该添加隐藏类并隐藏文本。 This first snippet is from the component.ts which outlines the boolean variable and the function which sets it to true. 第一个片段来自component.ts,它概述了布尔变量和将其设置为true的函数。
export class MainMenuComponent implements OnInit {
ngState = false;
constructor() {
}
newGame(){
this.ngState = this.ngState === true ? false : true;
console.log(this.ngState);
}
}
This next snippet is the component html 下一个片段是组件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>
and here is the hide class below 这是下面的隐藏类
.hide{
opacity: 0;
}
When I replace [ngClass]="{'hide': ngState}" with [ngClass]="{'hide': true }" 当我替换[ngClass] = “{ '隐藏':ngState}”与[ngClass] = “{ '隐藏': 真 }”
It will then work as intended. 然后它将按预期工作。 What am I not understanding here? 我在这里不理解什么?
Here is a link to my code with a working example: https://stackblitz.com/edit/angular-fg48ro?file=src%2Findex.html 以下是我的代码的链接,其中包含一个工作示例: https : //stackblitz.com/edit/angular-fg48ro?file = src%2Findex.html
Try without Quote
试试没有Quote
<li *ngFor="let opt of opts" class="{{opt.class}}" [ngClass]="{hide: ngState}" (click)="opt.f()">{{opt.n}}</li>
EDIT 编辑
When i see your code, the issue is not related to angular, but with javascript context, you need to specifiy the context of this like 当我看到你的代码时,问题与angular无关,但是对于javascript上下文,你需要指定这样的上下文
' f: this.newGame.bind(this),'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.