Question

我正在使用Angular中的ng-multiselect-dropdown创建一个多选下拉列表作为自定义标头。我似乎无法弄清楚的是，是否有一种方法可以设置要在列表中预先选择的值。现在这是我的下拉菜单的代码：

<ng-template *ngIf="column.dropdown" let-column="column" let-sort="sortFn" 
             ngx-datatable-header-template>
  <ng-multiselect-dropdown [placeholder]="column.name"
             class="d-inline-block" [data]="this[column.prop]"
             [settings]="dropdownSettings">
  </ng-multiselect-dropdown>
</ng-template>

有没有可以设置的属性，可以预选列表中的某些值？我没有找到有关如何执行此操作的任何文档。预先感谢。

Answer 1

.push（）对我不起作用，似乎组件对推送事件没有反应。.我必须替换整个数组才能使其正常工作。

<ng-multiselect-dropdown [(ngModel)]="selected" ...></ng-multiselect-dropdown>

this.selected = [{item_id: 1, item_name: 'xxxxx'}, {item_id: 2, item_name: 'yyyyyy'}];

Answer 2

我想我应该更仔细地阅读API文档。它实际上是通过在ng-multiselect-dropdown标记上设置[[ngModel）]属性来指定如何执行此操作的。

Answer 3

<ng-multiselect-dropdown [(ngModel)]="selected" ...></ng-multiselect-dropdown>

在打字稿中：

this.selected.push({item_id: 1, item_name: 'xxxxx'});

Answer 4

在这里，ng-multiselect-dropdown预选择选项值与ngModel绑定，并且我还显示了对ng-multiselect-dropdown的验证：

<ng-multiselect-dropdown
    formControlName="location"
    id="location"
    [data]="supplierList"
    [(ngModel)]="selectedSupplier"
    [settings]="supplierDropDownSettings"
    (onSelect)="onLocationSelect($event)">
</ng-multiselect-dropdown>
<div *ngIf="submitted && formGroup.controls['location'].invalid"
    class="text-danger mt-1">
    <div *ngIf="formGroup.controls['location'].errors.required">
                            This filed is required
    </div>
</div>

public selectedSupplier: Array<SupplierModal> = [];
public warehouse: SupplierModal = { "id": 1, "name" : Company }
this.selectedSupplier = new Array<SupplierModal>();
this.selectedSupplier.push(this.warehouse);

Answer 5

ts文件：

dropdownList = [];
selectedItems = [];
dropdownSettings = {};
this.dropdownList = [
    { item_id: 1, item_text: 'Mumbai' },
    { item_id: 2, item_text: 'Bangaluru' },
    { item_id: 3, item_text: 'Pune' },
    { item_id: 4, item_text: 'Navsari' },
    { item_id: 5, item_text: 'New Delhi' }
];
this.selectedItems = [
    { item_id: 3, item_text: 'Pune' },
    { item_id: 4, item_text: 'Navsari' }
];

html文件：

<ng-multiselect-dropdown
  [placeholder]="'custom placeholder'"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
>
</ng-multiselect-dropdown>

来源：https://www.npmjs.com/package/ng-multiselect-dropdown

Answer 6

组件HTML（带有FormControl）

<ng-multiselect-dropdown
 [placeholder]="'Select Controller'"
 [data]="controllerList"
 formControlName="controller"
 [settings]="dropdownSettings"
 (onSelect)="onItemSelectController($event)"
 (onSelectAll)="onSelectAllController($event)" 
 (onDeSelect)="onItemDeSelectController($event)"  
 (onDeSelectAll)="onDeSelectAllController($event)" 
 (onDropDownClose)="onDropDownCloseController()">
</ng-multiselect-dropdown>

组件TS（带有FormControl）

controllerList: any;
addRoleForm: FormGroup;

dropdownSettings: any = {
  singleSelection: false,
  idField: 'item_id',
  textField: 'item_text',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

this.addRoleForm = this.formBuilder.group({    
      controller: ['', Validators.compose(
        [Validators.required]
      )]          
});

ngAfterViewInit(){
  this.selectedConcrollers = [
    {item_id: 1, item_text: 'value'},
    {item_id: 1, item_text: 'value'}
  ];

  this.addRoleForm.patchValue({
    controller: this.selectedConcrollers 
  });
}

Angular ng-multiselect-下拉列表中的预选选项

6 个答案: