Javascript 角度模板类动态切换

角度HTML模板反应式表单：

<div class= "one">
<button class = "verticalButtonClass" (click) = "onClick()"> Label4 </button>
</div>

<div class = "two">
</button>
<button class = "horizontalButtonClass" (click) = "onClick()"> Label14 </button>
<button class = "verticalButtonClass"   (click) = "onClick()"> Label15 </button>
</div>

<button class = "three"
    [class.verticalButtonClass] = "m_bool_variable"
    [class.horizontalButtonClass] = "!m_bool_variable"
    (click) = "m_bool_variable.setValue( false )"> XCV </button>

.verticalButtonClass
{
    color: blue;
    background-color: red;
    
    display:block;
    width: 100px;
    border: 2px solid green;
    margin-bottom: 2px;
}

.horizontalButtonClass
{
    color: blue;
    background-color: lightgreen;
    
    float:left;
    width: 100px;
    border: 2px solid green;
    margin-left: 2px;
}

.ts文件：

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

@Component({
  selector: 'app-vertical',
  templateUrl: './vertical.component.html',
  styleUrls: ['./vertical.component.css']
})
export class VerticalComponent implements OnInit 
{
    m_bool_variable = new FormControl( false );

  constructor() { }

  ngOnInit(): void 
  {
    this.m_bool_variable.setValue( true );
  }

  onClick()
  {
    console.log("asdasd")
  }

}

现在默认情况下，按钮的颜色保持红色，因为该变量最初设置为true。当我点击按钮时，颜色不会变为绿色

---

请指出错误。

m\u bool\u变量

将始终变为

true

，无论表单控件值如何，因为它是一个对象。要获取控件的值，请使用

m\u bool\u变量。value