ng 类不响应类属性更改

Question

我正在学习通过这些视频的角度，并尝试简单的东西。

我使用ngClass创建了一个 H2 标签，并使用ClassChooser对象对其进行设置。 我还创建了一个按钮单击的事件处理程序，该处理程序更改了classChooser.class1分配给的属性class1IsOn值，但 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"
}