如何在p-dropdown的Onchange事件中获取两个属性

Question

下面我有苹果的p-下拉菜单。我想使用 onchange 获取 apple id 和 apple desc，我只能将 apple id 视为 Onchange 苹果事件中的值。我可以在 Javascript 中的 Onchange 苹果事件中同时获取 apple id 和 apple desc 吗？

        <div class="p-col-12 p-md-4">
                    <div class="p-field">
                        <label for="apple">Apple</label>
    
                        <p-dropdown [options]="apples" name="apple" id="apple" #name="ngModel"
                            [(ngModel)]="fruits.appleId" optionLabel="appleDesc"
                            optionValue="appleId" filterBy="appleId,appleDesc" [showClear]="false"
                            placeholder="Select Item" [virtualScroll]="true" [itemSize]="50" [filter]="true" appendTo="body"
                            (onChange)="onChangeApple($event)">
                            <ng-template let-apple pTemplate="selectedItem">
                                <div>
                                    <div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
                                </div>
                            </ng-template>
                            <ng-template let-apple pTemplate="item">
                                <div>
                                    <div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </div>
                </div>

这里我尝试使用 onchange 苹果事件来获取 id 和 desc。 这里的事件输入属性只有apple id，我可以同时获取apple desc吗？

onChangeApple(event) {
        console.log('event :' + event);
        console.log(event.value); //here value is apple id,i also want appledesc here,but i don't see it in event property to get it.
    }   
        

Answer 1

如果您想要整个对象，则只需删除

optionValue

和

optionLabel

这将为您提供整个对象，注意：

ngModel

也将拥有整个对象。

HTML：

<div class="p-col-12 p-md-4">
  <div class="p-field">
    <label for="apple">Apple</label>

    <p-dropdown
      [options]="cities"
      name="apple"
      id="apple"
      #name="ngModel"
      [(ngModel)]="appleId"
      filterBy="appleId,appleDesc"
      [showClear]="false"
      placeholder="Select Item"
      [virtualScroll]="true"
      [itemSize]="50"
      [filter]="true"
      appendTo="body"
      (onChange)="onChangeApple($event)"
    >
      <ng-template let-apple pTemplate="selectedItem">
        <div>
          <div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
        </div>
      </ng-template>
      <ng-template let-apple pTemplate="item">
        <div>
          <div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
        </div>
      </ng-template>
    </p-dropdown>
  </div>
</div>

Stackblitz 演示

---

如果您只想更改包含整个对象，只需执行数组查找操作即可获取整个对象。

onChangeApple(event) {
    console.log('event :' + JSON.stringify(event));
    const found = this.cities.find((item: any) => item.appleId === event.value);
    console.log(found); //here value is apple id,i also want appledesc here,but i don't see it in event property to get it.
  }

Stackblitz 演示