禁用angular2多選復選框

我想知道是否有可能禁用多選下拉串列中存在的某些復選框專案。多選有一個選項可以禁用整個下拉串列，但我想知道我們是否可以禁用特定的復選框。對于下面的代碼，有沒有辦法禁用默認選擇的復選框值。

TS

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
    this.dropdownList = [
                          {"id":1,"itemName":"India"},
                          {"id":2,"itemName":"Singapore"},
                          {"id":3,"itemName":"Australia"},
                          {"id":4,"itemName":"Canada"},
                          {"id":5,"itemName":"South Korea"},
                          {"id":6,"itemName":"Germany"},
                          {"id":7,"itemName":"France"},
                          {"id":8,"itemName":"Russia"},
                          {"id":9,"itemName":"Italy"},
                          {"id":10,"itemName":"Sweden"}
                        ];
    this.selectedItems = [
                            {"id":2,"itemName":"Singapore"},
                            {"id":3,"itemName":"Australia"},
                            {"id":4,"itemName":"Canada"},
                            {"id":5,"itemName":"South Korea"}
                        ];
    this.dropdownSettings = { 
                              singleSelection: false, 
                              text:"Select Countries",
                              selectAllText:'Select All',
                              unSelectAllText:'UnSelect All',
                              enableSearchFilter: true,
                              classes:"myclass custom-class"
                            };            
}
onItemSelect(item:any){
    console.log(item);
    console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
    console.log(item);
    console.log(this.selectedItems);
}
onSelectAll(items: any){
    console.log(items);
}
onDeSelectAll(items: any){
    console.log(items);
}

}

HTML

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
(onSelect)="onItemSelect($event)" 
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>

uj5u.com熱心網友回復：

在 dropdownList 中：您可以向要禁用的選項添加其他鍵，如下所示：
{ id: 1, itemName: 'India', disabled: true } 然后在 html 中使用自定義模板，如下所示：

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
(onSelect)="onItemSelect($event)" 
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">
<c-badge>
<ng-template let-item="item">
  <label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
  [disabled]="item.disabled"
</ng-template>
</c-badge></angular2-multiselect>

這是作業示例：

https://stackblitz.com/edit/angular2-multiselect-dropdown-tsqghc?file=src/app/app.component.html

uj5u.com熱心網友回復：

您可以通過在選項中使用 : [disabled] 來禁用模板中的特定選項。例如：

<mat-form-field appearance="fill">
   <mat-label>Choose an option</mat-label>
   <mat-select [disabled]="disableSelect.value">
     <mat-option value="option1">Option 1</mat-option>
     <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
     <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

從角度材料選擇

正如您在選項 2 中看到的，您擁有 "disabled" ，您可以將其更改為 input 并從您的串列中傳遞它，或者只是將第一個選項設定為 disabled 。

您可以添加 HTML 檔案，然后我可以編輯和添加完整代碼。

標籤：javascript 有角的 打字稿 多选

上一篇：多個foreach回圈可能存在性能問題

下一篇：ngFornetstedarraywithobjectsinmatselect選項