Question

我通过these vidoes学习角度，并尝试简单的东西。

我使用 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"
}

ng类没有响应类属性更改

1 个答案: