显示多重选择的材质选择框

Question

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

}});

Answer 1

使用 [ngClass]，在 selectedOption 方法中设置一个标志（示例：option3Selected = true;）&nbsp; <mat-option value="op3" [ngClass]="{'option3-not-selected': option3Selected === false,'option3-selected':option3Selected === true}">Option 3</mat-option>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .option3-not-selected&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; background-color: white; // TO REMOVE COLOR, You can set any color.&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .option3-selected&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; background-color: Green;&nbsp; // TO SET COLOR, You can set any color.&nbsp; &nbsp; &nbsp; }