萬千封印
2024-01-18 14:53:33
目前我正在使用材質(zhì)角度 ui 進(jìn)行選擇控制。當(dāng)用戶選擇特定選項(xiàng)(例如:選項(xiàng) 3)時(shí),將顯示一個(gè)確認(rèn)彈出窗口。如果在確認(rèn)彈出舊數(shù)據(jù)中選擇“否”(例如:選項(xiàng) 1),則應(yīng)在選擇框中選擇。它工作正常。但問題是 .mat-active 類也顯示了選項(xiàng) 3。如何刪除選項(xiàng) 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");}});
1 回答

翻閱古今
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊
使用 [ngClass],在 selectedOption 方法中設(shè)置一個(gè)標(biāo)志(示例: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.
}
添加回答
舉報(bào)
0/150
提交
取消