如何重置ng-multiselect-dropdown

时间:2018-11-02 08:03:06

标签: html angular drop-down-menu dropdown

我想重置ng-multiselect-dropdown。有必要将其放入表格吗?

代码-

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>

app.component.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;
  }

}

4 个答案:

答案 0 :(得分:2)

没有必要将其放置在表单中-如果要清除选定的项目,只需将selectedItemsRoot对象设置为一个空数组。即

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

并将该函数绑定到按钮,或使用其他用于清除选择内容的方法来调用它。

答案 1 :(得分:1)

没有必要将其放在表格中。 只需将selectedItemsRoot数组设为空即可。从元素/上下文调用此函数resetSelection()。 如果您使用按钮清除选择,则可能是

.html

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

.ts

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

答案 2 :(得分:0)

如果您使用formControlName而不是ngModel,则可以使用类似的内容

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

答案 3 :(得分:0)

如果您还想清除字段中的选定项目,则选定数组的名称必须为:“ selectedItems