我使用Angular中的ng多选下拉列表创建一个多选下拉列表作为自定义标题。我似乎不知道是否有办法设置我将在列表中预先选择的值。这是我的下拉列表编码：
<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>
是否有我可以设置的属性可以预先选择列表中的某些值？我一直找不到任何关于如何做到这一点的文档。提前谢谢。
这里，ng多选下拉菜单预选选项值与ngModel绑定，我还显示了对ng多选下拉列表的验证：
<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);
组件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
});
}
.push((对我不起作用，看起来组件并没有对push事件做出反应。。我必须更换整个阵列才能使其工作。
<ng-multiselect-dropdown [(ngModel)]="selected" ...></ng-multiselect-dropdown>
this.selected = [{item_id: 1, item_name: 'xxxxx'}, {item_id: 2, item_name: 'yyyyyy'}];
我想我应该更仔细地阅读API文档。它实际上通过设置ng multiselect下拉标记上的[(ngModel(]属性来指定如何执行此操作。
<ng-multiselect-dropdown [(ngModel)]="selected" ...></ng-multiselect-dropdown>
打字：
this.selected.push({item_id: 1, item_name: 'xxxxx'});
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
如果ngModel是一个独立的属性，或者它会给出错误，那么您仍然可以在formGroup中使用ngModel