Html 角度更改选择后选择类

我是Angular方面的新手，我尝试使用（更改）事件根据选择更改my的类和值，但是我不知道如何从我的typescript中更改类

Component.html

     <select class="btn btn-succes" (change)="status(model.estatus)"> //My Model Logic gets me a number from 1-3
                    <option value="1"> warning</option>
                    <option value="2"> danger</option>
                    <option value="3"> primary</option>
                </select>

<select class="btn" [ngClass]="{
    'btn-warning': selectedStatus === statuses.Warning,
    'btn-danger': selectedStatus === statuses.Danger,
    'btn-primary': selectedStatus === statuses.Primary
  }" [(ngModel)]="selectedStatus" (ngModelChange)="onChange($event)">
    <option [value]="s.value" *ngFor="let s of statuses | keyvalue"> {{s.key}}</option>
</select>

（更改）

绑定到经典输入更改事件的事件

（ngModelChange）

是ngModel指令的

@输出。它在模型更改时激发。如果没有ngModel指令，则无法使用此事件

app.component.html

     <select class="btn btn-succes" (change)="status(model.estatus)"> //My Model Logic gets me a number from 1-3
                    <option value="1"> warning</option>
                    <option value="2"> danger</option>
                    <option value="3"> primary</option>
                </select>

<select class="btn" [ngClass]="{
    'btn-warning': selectedStatus === statuses.Warning,
    'btn-danger': selectedStatus === statuses.Danger,
    'btn-primary': selectedStatus === statuses.Primary
  }" [(ngModel)]="selectedStatus" (ngModelChange)="onChange($event)">
    <option [value]="s.value" *ngFor="let s of statuses | keyvalue"> {{s.key}}</option>
</select>

app.component.ts

import { Component } from "@angular/core";

import { Status } from "./status.enum";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {

  selectedStatus = "1";

  get statuses() {
    return Status;
  }

  onChange(event: Event): void {
    console.log(event);
    // write your code here
  }
}

（更改）
绑定到经典输入更改事件的事件

（ngModelChange）
是ngModel指令的
@输出。它在模型更改时激发。如果没有ngModel指令，则无法使用此事件

app.component.html

     <select class="btn btn-succes" (change)="status(model.estatus)"> //My Model Logic gets me a number from 1-3
                    <option value="1"> warning</option>
                    <option value="2"> danger</option>
                    <option value="3"> primary</option>
                </select>

<select class="btn" [ngClass]="{
    'btn-warning': selectedStatus === statuses.Warning,
    'btn-danger': selectedStatus === statuses.Danger,
    'btn-primary': selectedStatus === statuses.Primary
  }" [(ngModel)]="selectedStatus" (ngModelChange)="onChange($event)">
    <option [value]="s.value" *ngFor="let s of statuses | keyvalue"> {{s.key}}</option>
</select>

app.component.ts

import { Component } from "@angular/core";

import { Status } from "./status.enum";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {

  selectedStatus = "1";

  get statuses() {
    return Status;
  }

  onChange(event: Event): void {
    console.log(event);
    // write your code here
  }
}

在组件中取消名为
selectedValue
的属性，并在
状态中更改
selectedValue
方法，根据您的条件更改
selectedValue

<select
  class="btn btn-succes"
  (change)="status(model.estatus)"
  [ngClass]="{
    'btn-warning': selectedValue == 1,
    'btn-danger': selectedValue == 2,
    'btn-primary': selectedValue == 3
  }"
>
  <option value="1">warning</option>
  <option value="2">danger</option>
  <option value="3">primary</option>
</select>


警告
危险
主要的，重要的
在组件中删除名为
selectedValue
的属性，并在
状态中输入
方法，根据您的条件更改
selectedValue

<select
  class="btn btn-succes"
  (change)="status(model.estatus)"
  [ngClass]="{
    'btn-warning': selectedValue == 1,
    'btn-danger': selectedValue == 2,
    'btn-primary': selectedValue == 3
  }"
>
  <option value="1">warning</option>
  <option value="2">danger</option>
  <option value="3">primary</option>
</select>


警告
危险
主要的，重要的
在我的组件上添加了一个HtmleElement，而不仅仅是值之后，它就可以工作了

estatus(elem: HTMLElement,estatus:number)  {
if(estatus==1)
{
  console.log(estatus, 'antes')
  elem.className='btn-success'

}else if(estatus==2)
{
  console.log(estatus, 'antes')
  elem.className='btn-warning'

}else if(estatus==3)
{
  console.log(estatus, 'antes')
  elem.className='btn-primary'

} }

com组件.HTML

<select class="btn btn-succes" estatus(demo,$event.target.value)" #demo> 
                <option value="1"> warning</option>
                <option value="2"> danger</option>
                <option value="3"> primary</option>
            </select>

在我的组件上添加了一个HtmleElement而不仅仅是值之后，它就可以工作了

estatus(elem: HTMLElement,estatus:number)  {
if(estatus==1)
{
  console.log(estatus, 'antes')
  elem.className='btn-success'

}else if(estatus==2)
{
  console.log(estatus, 'antes')
  elem.className='btn-warning'

}else if(estatus==3)
{
  console.log(estatus, 'antes')
  elem.className='btn-primary'

} }

com组件.HTML

<select class="btn btn-succes" estatus(demo,$event.target.value)" #demo> 
                <option value="1"> warning</option>
                <option value="2"> danger</option>
                <option value="3"> primary</option>
            </select>

运行它时实际会发生什么？根据您提供的代码，我猜没有什么？运行它时实际会发生什么？根据你提供的代码，我什么也没猜到？