ng-禁用动态下拉列表中的选定值时，模型值变为空

<select [(ngModel)]="selectedValue" (ngModelChange)="onModelChange($event)">
  <option *ngFor="let option of options" [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
</select>

onModelChange(value: any) {
  if (this.selectedValue === value) {
    // 当禁用的选项与当前模型值相同时，手动更新模型值为其他有效选项
    this.selectedValue = this.options.find(option => !option.disabled)?.value;
  }
}

<select [(ngModel)]="selectedValue" [compareWith]="compareFn">
  <option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
</select>

compareFn(option1: any, option2: any): boolean {
  // 自定义比较函数，判断选项是否匹配模型值
  return option1 && option2 ? option1.value === option2.value : option1 === option2;
}

<select [(ngModel)]="selectedValue">
  <option *ngFor="let option of options" [value]="option.value" [class.disabled]="option.disabled">{{ option.label }}</option>
</select>

option.disabled {
  color: gray;
  pointer-events: none;
}