javascript - 禁用下拉列表中的最低值

Question

我有一个下拉列表数组，它显示在我的 UI 中如何禁用数组中所有最高的元素，我只想启用数组中的最低值

<select class="select-option" name="tier" required [ngModel]="tierDropDown">
    <option value="select Tier" selected>Select Tier</option>
    <option class="option" *ngFor="let tier of tierList" let i="index" value="{{tier}}" [disabled]="arr">
        {{ tier }}
    </option>
</select>

.TS文件:

tierList = ["Tier1", "Tier2", "Tier3", "Tier4", "Tier5"]
this.arr = [];
let min = this.tierList;
this.arr = min.sort();
this.arr.splice(this.arr[0], 1);
console.log(this.arr);
this.arr.splice(this.arr[0], 1);
console.log(this.arr);

这将返回拼接较低的元素和所有较高的元素，所以我在 HTML 文件的 [disabled] 属性中绑定(bind)该值，但结果是我的所有下拉值都被禁用

Answer 1

您可以将数组中的最小值存储在局部变量中，然后将该变量用于 [disabled] 属性:

HTML代码:

<select class="select-option" name="tier" required [ngModel]="tierDropDown">
 <option value="select Tier" selected>Select Tier</option>
 <option class="option" *ngFor="let tier of tierList" let i="index" value="{{tier}}" [disabled]="tier != LowestValue">
   {{ tier }}
 </option>
</select>

TS:

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  tierList = ["Tier1", "Tier5", "Tier3", "Tier4", "Tier2"]
  LowestValue: any;
  constructor() {
    this.LowestValue = this.tierList.sort()[0];
  }
}

Working_Demo