显示多项选择的材料选择框答案

【问题标题】：Material Select Box showing multiple selection显示多项选择的材料选择框
【发布时间】：2021-04-01 22:31:57
【问题描述】：

目前我正在使用材质角度 ui 进行选择控制。当用户选择特定选项（例如：选项 3）时，将显示一个确认弹出窗口。如果在确认弹出旧数据（例如：选项 1）中选择否，则应在选择框中选择。它工作正常。但问题是选项 3 也显示了 .mat-active 类。如何删除选项 3 的选定突出显示？

<mat-form-field>
                  <mat-select id="select" matInput formControlName="demo" (selectionChange)="selectedOption($event)">
                      <mat-option value="op1">Option 1</mat-option>
                      <mat-option value="op2">Option 2</mat-option>
                      <mat-option value="op3">Option 3</mat-option>
                  </mat-select>
              </mat-form-field>

public selectedOption(event: MatSelectChange) {
      let selectedItem = event.source.value;
      if (selectedItem == "op3") 
        this.showConfirmation();          
      else
        this.selected = selectedItem;
     }
 //On confirmation pop up close
 dialogRef.afterClosed().subscribe(result => {
  if (result)
    this.parameters.controls.demo.setValue("op3");
  else
  {
    this.selected ? this.parameters.controls.demo.setValue(this.selected) : this.parameters.controls.demo.setValue("op1");
}});

Screen Shot of UI

【问题讨论】：

请edit您的问题：澄清问题标题，提高内容质量，改进代码格式，包括当前结果，包括预期结果。见How to Ask

标签： javascript css angular angular-material

【解决方案1】：

使用 [ngClass]，在 selectedOption 方法中设置一个标志（例如：option3Selected = true;）

  <mat-option value="op3" [ngClass]="{'option3-not-selected': option3Selected === false,'option3-selected':option3Selected === true}">Option 3</mat-option>
    
      .option3-not-selected
      {
        background-color: white; // TO REMOVE COLOR, You can set any color.
      }
    
      .option3-selected
      {
        background-color: Green;  // TO SET COLOR, You can set any color.
      }

【讨论】：