使用另一个按钮打开多选 (primeng, angular)

Question

有没有办法使用另一个按钮打开 primeng multiselect？

我试过通过点击 nativeElement 来触发，但没有成功。

下面是我的组件：

<div>
  <button class="btn btn-primary" #filterButton (click)="openMultiselect()">Trigger remotely</button>
</div>

<div class="ui-g">
  <div class="ui-g-6 ui-fluid">
    <p-multiSelect [options]="cities1" [(ngModel)]="selectedCities1"></p-multiSelect>
  </div>
</div>

和 TS:

@ViewChild(MultiSelect) filterButton: MultiSelect;

  openMultiselect() {
    this.filterButton.el.nativeElement.click()
  }

和 stackblitz：https://stackblitz.com/edit/ngprime-multiselect-azdsh4

Answer 1

您需要执行两个步骤才能实现它：

调用publicMultiSelect::show方法
停止传播事件以防止在同一操作期间关闭对话框

html

<button (click)="openMultiselect($event)" ...

ts

@ViewChild(MultiSelect) multiSelect: MultiSelect;

openMultiselect(e) {
  this.multiSelect.show();
  e.stopPropagation();
}

Forked Stackblitz

Answer 2

Typescript
@ViewChild('refMulSel') refMulSel: MultiSelect

 toggleMulSel: boolean = false;
  openMulSel(e) {
    this.toggleMulSel = !this.toggleMulSel;
    if (this.toggleMulSel) {
      this.refMulSel.show();
    } else {
      this.refMulSel.hide();
    }`enter code here`

    e.stopPropagation();
  }

Html
<span (click)="openMulSel($event)" >Open</span>
<p-multiSelect  #refMulSel></p-multiSelect>

使用另一个按钮打开多选 (primeng, angular)

Open multiselect with another button (primeng, angular)

multi-select

primeng

angular