如何重置ng多选下拉列表

Question

我想重置ng多选下拉列表。有必要把它写在表格里吗？

代码-

app.component.html

<div>
<p id = "node">Select a Root API Object - </p>
<p style="width:50%">
<ng-multiselect-dropdown [placeholder]="'Select Root API Object'" [data]="dropdownListRoot" [(ngModel)]="selectedItemsRoot" [settings]="dropdownSettingsRoot"
(onSelect)="onItemSelectRoot($event)" (onSelectAll)="onSelectAllRoot($event)">
</ng-multiselect-dropdown>
</p>
</div>

应用程序组件.ts

export class HierarchySearchComponent implements OnInit {
onItemSelectRoot(item: any) {
this.onlyRootItemSelect = true;  // for cypher also.

console.log(item); 
this.rootItem = item;
this.nodeSelect = true;
this.rootItemText = this.rootItem.item_text;
console.log("this.rootItemText = ", this.rootItemText);
}

onSelectAllRoot(items: any) {
console.log("On Item select all" + items);
this.nodeSelect = true;
}

}

Answer 1

没有必要将其格式化。只需将selectedItemsRoot数组设为空即可。从元素/上下文调用此函数resetSelection((。如果您使用该按钮清除选择，它可以是

.html

`<button (click)="resetSelection()" >clear</button>`

.ts

resetSelection() {
this.selectedItemsRoot = [];        
}

Answer 2

不需要将其放入表单中-如果要清除所选项目，只需将selectedItemsRoot对象设置为空数组即可。即

clearSelection() {
this.selecteditemsRoot = [];
}

并将该函数绑定到按钮，或者使用任何其他方法调用它来清除选择。

Answer 3

如果您使用的是formControlName而不是ngModel，那么您可以使用类似于以下的东西

this.myForm.get(formControlName).setValue([]);