使用 primeng 的 p-dropdown 分配对象的多个属性

Question

我有一个这样的对象分配给 ngmodel：

export class operator {
  id: string;
  name: string;
  numUser: number;
  storeName: string;
  storeCode: number;
  activeOn: string;
}

在我的下拉列表中，我分配了一个这样的对象列表（我现在将其称为“选项”）：

[
  {
    "storeCode": 2,
    "storeName": "storeName",
    "dateOfRegistration": "12/12/12",
    "inHbltAtuCrra": "string1",
    "inNegoPmt": "string2"
  },
]

因此，在我的 html 中，如果选择此 'option'，我想将 storeCode 和 storeName 分配给 Operator 对象。有没有办法做到这一点？我找不到任何东西，只有一个属性和 [(ngModel)]="operator.storeCode".

我的 p-下拉菜单：

  <p-dropdown
    [showClear]="true"
    [options]="stores"
    [(ngModel)]="operator.storeCode"
    [filter]="true"
    optionLabel="storeName"
    optionValue="storeCode"
    filterBy="storeName"
    placeholder="Choose store"
  >
  </p-dropdown>

Answer 1

删除optionValue行，默认为整个对象

  <p-dropdown
    [showClear]="true"
    [options]="stores"
    [(ngModel)]="operator"
    [filter]="true"
    optionLabel="storeName"
    filterBy="storeName"
    placeholder="Choose store"
  >
  </p-dropdown>

如果您只需要一些属性，请使用 onChange 事件

  <p-dropdown
    [showClear]="true"
    [options]="stores"
    (onChange)="onChange($event)"
    [filter]="true"
    optionLabel="storeName"
    filterBy="storeName"
    placeholder="Choose store"
  >
  </p-dropdown>

然后在component.ts

onChange(op: operator){
  this.operator.storeCode = op.storeCode;
  this.operator.storeName = op.storeName;
}

使用 primeng 的 p-dropdown 分配对象的多个属性

Assign multiple properties of an object with primeng's p-dropdown

html

angular

typescript

primeng