Angular6：基于下拉菜单中的选定值打开对话框

Question

I have a p-dropdown with a list containing multiple options to select [options]="newUnitSelectItems" . The goal is: if the user selects "other" from that list of options, a new dialog should open. If the user selects any other value from the list, a simple console.log should be performed. How do I achieve this?

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

I suppose the (onChange) is wrong here, because performConsoleLog() is called on every click. Is there a way to check which value is selected from [options]="newUnitSelectItems" in the html?

Thanks a lot!

Answer 1

You can use the command in options of 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 ");
   }

Remove onChange from select box.

Answer 2

you can use $event of change event to get the value selected :

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

in your TS :

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

Regards,