Angular6: открыть диалоговое окно на основе выбранного значения в раскрывающемся списке

Question

У меня есть p-dropdown со списком, содержащим несколько вариантов выбора [options]="newUnitSelectItems". Цель: если пользователь выбирает «другие» из этого списка параметров, должен открыться новый диалог. Если пользователь выбирает любое другое значение из списка, следует выполнить простое console.log. Как мне этого добиться?

new.component.html
      <p-dropdown name="newUnit" id="newUnit" [options]="newUnitSelectItems"
                  [(ngModel)]="Id"
                  (onChange)="performConsoleLog(Id, 'calc')"
                  ></p-dropdown>


new.component.ts
  performConsoleLog(unit: string, parameter: string) {
    if (parameter === 'calc') {
     console.log("No dialog open, unit: " + unit);
    }
  }

  newUnitSelectItems() {
    let selectItems: SelectItem[] = [
      {label: "%", value:"%"},
      {label: "g", value:"g"},
      {label: "other", value:"other"}
    ];
    return selectItems;
  }

Полагаю, (onChange) здесь не так, потому что performConsoleLog() вызывается при каждом клике. Есть ли способ проверить, какое значение выбрано из [options]="newUnitSelectItems" в html?

Большое спасибо!

Answer 1

Вы можете использовать $event из change события, чтобы получить выбранное значение:

<p-dropdown name="newUnit" id="newUnit" [options]="newUnitSelectItems"
                  [(ngModel)]="Id"
                  (onChange)="performConsoleLog($event)"
                  ></p-dropdown>

в вашем TS:

performConsoleLog($event) {
    if ($event.value.label === 'other') {
     // open your dialog.
    }
}

С уважением,

Answer 2

Вы можете использовать command в опциях p-dropdown.

 newUnitSelectItems() {
    let selectItems: SelectItem[] = [
      {label: "%", value:"%"},
      {label: "g", value:"g"},
      {label: "other", value:"other", command :()=> this.openModal()} //<--command is here
    ];

   openModal(){
     console.log("Opening modal ");
   }

Удалить onChange из поля выбора.