从下拉列表中禁用最低值

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);

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

Answer 1

似乎有比此处提供的答案更简单的方法。ngFor已导出可以别名为局部变量的值（来源：docs）。我们可以使用first局部变量来禁用除first下拉列表中的所有元素。根据文档first: boolean: 当项目是可迭代中的第一项时为真。考虑到这一点，我们可以first使用[disabled]="!first"这是您的 HTML 现在的外观<select class="select-option" name="tier" required [ngModel]="tierDropDown">&nbsp; &nbsp; <option value="select Tier" selected>Select Tier</option>&nbsp; &nbsp; <option class="option" *ngFor="let tier of tierList; let first = first" value="{{tier}}" [disabled]="!first">&nbsp; &nbsp; &nbsp; &nbsp; {{ tier }}&nbsp; &nbsp; </option></select>然后在你的组件中排序tierList。

Answer 2

您可以将数组中的最小值存储在局部变量中，然后将该变量用于[disabled]属性：HTML代码：<select class="select-option" name="tier" required [ngModel]="tierDropDown">&nbsp;<option value="select Tier" selected>Select Tier</option>&nbsp;<option class="option" *ngFor="let tier of tierList" let i="index" value="{{tier}}" [disabled]="tier != LowestValue">&nbsp; &nbsp;{{ tier }}&nbsp;</option></select>TS：@Component({&nbsp; selector: 'select-overview-example',&nbsp; templateUrl: 'select-overview-example.html',&nbsp; styleUrls: ['select-overview-example.css'],})export class SelectOverviewExample {&nbsp; tierList = ["Tier1", "Tier5", "Tier3", "Tier4", "Tier2"]&nbsp; LowestValue: any;&nbsp; constructor() {&nbsp; &nbsp; this.LowestValue = this.tierList.sort()[0];&nbsp; }}

Answer 3

您可以使用以下答案，您的html 文件<select class="select-option" name="tier" required >&nbsp; &nbsp;<option value="select Tier" selected>Select Tier</option>&nbsp; &nbsp;<option&nbsp; class="option" [disabled]="arr" *ngIf="arr">&nbsp; &nbsp; &nbsp; {{arr}}&nbsp; &nbsp;</option>&nbsp; &nbsp;<option&nbsp; class="option" *ngFor="let tier of tierList" let i="index" value="{{tier}}" >&nbsp; &nbsp; {{ tier }}&nbsp; &nbsp;</option></select>在.ts文件中，tierList =["Tier1","Tier2","Tier3","Tier4","Tier5"];arr = [];let min = this.tierList;this.arr = min.sort();this.arr.splice(this.arr[0], 1);this.arr = this.arr.splice(this.arr[0], 1);this.arr = this.arr[0]console.log(this.arr[0]);console.log(this.tierList);这个答案对你有用。