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]属性中的值绑定在一起，但结果是我的所有下拉值都被禁用了

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

Answer 2

似乎比这里提供的答案要容易得多。 ngFor导出了可以别名为局部变量的值（来源：docs）。我们可以使用first局部变量来禁用下拉列表中first以外的所有元素。

根据文档

first: boolean：如果该项是可迭代项的第一项，则为true。

考虑到这一点，我们可以使用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 3

[disabled]应该绑定到 boolean 。现在，您将其绑定到数组arr。因此，它将永远是正确的。 arr存在。我不完全了解您要做什么，但是如果将en对象添加到tierList中，则可以为每个元素计算一个isDisabled属性，并将其绑定到Disabled。

例如：{name:tier1,disabled:true}

Answer 4

您可以使用以下答案，
您的 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);

此答案将为您服务。

禁用下拉菜单中的最小值

4 个答案: