web-dev-qa-db-ja.com

ng-multiselect-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;
  }

}

htmlangulardrop-down-menudropdown
3
Techdive

形にする必要はありません。 selectedItemsRoot配列を空にするだけです。要素/コンテキストからこの関数resetSelection（）を呼び出します。ボタンを使用して選択をクリアしている場合は、

.html

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

.ts

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

フォームに入力する必要はありません。選択したアイテムをクリアする場合は、selectedItemsRootオブジェクトを空の配列に設定するだけです。つまり.

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

そして、その関数をボタンにバインドするか、選択をクリアするために使用している他のメソッドでそれを呼び出します。

2
Phobos

ngModelの代わりにformControlNameを使用している場合は、次のようなものを使用できます。

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

フィールドで選択した項目もクリアする場合は、選択した配列の名前を次のようにする必要があります： "selectedItems"

0
Avi