нг класс не отвечает на изменение свойства класса

Question

Я изучаю угловой, проходя через эти видео и пробуя простые вещи.

Я создал тег H2, используя ngClass , и установил его с помощью объекта ClassChooser . Я также создал обработчик событий для нажатия кнопки, который изменяет значение свойства class1IsOn , которому назначено classChooser.class1 , но ngClass не отвечает на изменение.

Что я делаю не так?

Спасибо

import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-test',
      template: `
                <h2 [ngClass]="classChooser"> class chooser result</h2>
                <button (click)="onClick()" > nadav </button>
                     `,
      styles:[`.class1{
        color: darksalmon;
      }.class2{
        font-style: italic;
       }`]
    })
    export class TestComponent implements OnInit {


      public class1IsOn = false;
      public class2IsOn = true;


      public onClick(){
        this.class1IsOn = true;
      }

      public classChooser = {
        "class1":this.class1IsOn,
        "class2":this.class2IsOn
      }
      constructor() { }

      ngOnInit() {
      }

    }

Answer 1

Странно твой код. Вы можете использовать

<h2 [ngClass]="{'class1':class1IsOn,
                'class2':class2IsOn"> 
     class chooser result
</h2>
public onClick(){
      this.class1IsOn = !this.class1IsOn;
      this.class2IsOn = !this.class2IsOn;
}

Или

<h2 [ngClass]="myclass"> 
     class chooser result
</h2>
public onClick(){
  this.myclass=this.myclass=="class1"? "class1":"class2"
}