从下拉列表中禁用最低值

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">

    <option value="select Tier" selected>Select Tier</option>

    <option class="option" *ngFor="let tier of tierList; let first = first" value="{{tier}}" [disabled]="!first">

        {{ tier }}

    </option>

</select>

然后在你的组件中排序tierList。

Answer 2

您可以将数组中的最小值存储在局部变量中，然后将该变量用于[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];

  }

}

Answer 3

您可以使用以下答案，

您的html 文件

<select class="select-option" name="tier" required >

   <option value="select Tier" selected>Select Tier</option>

   <option  class="option" [disabled]="arr" *ngIf="arr">

      {{arr}}

   </option>

   <option  class="option" *ngFor="let tier of tierList" let i="index" value="{{tier}}" >

    {{ tier }}

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

这个答案对你有用。