Angular 6 [ngClass] не работает с логическим значением в component.js - PullRequest
Новая
       9

Angular 6 [ngClass] не работает с логическим значением в component.js

0 голосов
/ 27 июня 2018

Я пытаюсь скрыть текст, когда ngState имеет значение true. При нажатии определенного элемента это состояние устанавливается в значение true. Затем [ngClass] должен добавить класс hide и скрыть текст. Этот первый фрагмент взят из 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

1 Ответ

0 голосов
/ 27 июня 2018

Попробуйте без Quote

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

EDIT

Когда я вижу ваш код, проблема связана не с angular, а с контекстом javascript, вам необходимо указать контекст этого, например

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

DEMO

...