我用的是最新版本的mat-select v 16。當選擇了某個特定選項并單擊選擇下拉菜單時,所選選項不應顯示在選項列表中。這就是我在html中使用的內容。
<mat-form-field>
<mat-select formControlName="value" selected="option1">
<mat-option *ngFor="let item of options"
[value]="item.value">{{ item.label }}</mat-option>
</mat-select>
</mat-form-field>
項目包括選項1、選項2和選項3。
我需要使用什么,以便在選擇選項1時,只有選項2和選項3應該顯示在下拉列表中??
請回復?。〉賮啠。?!
# # #你可以通過CSS添加一個類來隱藏選中的國家
<mat-form-field>
<mat-select name="countryVaraible" [(value)]="selectedCountry" placeholder="Country">
<mat-option *ngFor="let country of countries" [value]="country.short" [ngClass]="country.short === selectedCountry ? 'hidden' : ''">
{{country.full}}
</mat-option>
</mat-select>
</mat-form-field>
.hidden{
display: none;
}
# # #試試這個:
1-在TypeScript組件中,將selectedOption變量聲明為空字符串,并創建一個方法來設置其值:
selectedOption: string = '';
setSelectedOption(option: string) {
this.selectedOption = option;
}
2-在您的HTML中,使用此方法將選定的值分配給selectedOption
<mat-form-field>
<mat-select formControlName="value" [(ngModel)]="selectedOption">
<mat-option *ngFor="let item of options" [value]="item.value" (click)="setSelectedOption(item.value)">{{ item.label }}</mat-option>
</mat-select>
</mat-form-field>
現在,當您單擊一個選項時,setSelectedOption方法將被調用,以用選定的選項更新SelectedOption的值。