PrimeNG 下拉选择选项在与界面绑定时重置 属性

Question

这就是我声明 p-dropdown:

的方式

<p-dropdown name="taxOptions" [options]="taxOptions" [(ngModel)]="purchaseInvoiceDetail.tax"></p-dropdown>

taxOptions 属性 填充如下：

this.taxOptions = [
      { label: 'Tax Exclusive', value: '0' },
      { label: 'Tax Inclusive', value: '1' }
];

这是PurchaseInvoiceDetail界面：

export interface PurchaseInvoiceDetail {
  id: number,
  product: Product,
  quantity: number,
  unitPrice: number,
  discount: number,
  tax: string,
  purchaseInvoice: PurchaseInvoice
}

table 使用 *ngFor 在 PurchaseInvoiceDetail 的数组上填充，即 PurchaseInvoiceDetail[].

因此 table 的每一行中都存在一个单独的 p 下拉列表。问题是，当我更改下拉列表的值并添加另一个产品时，table 会刷新并且上一个下拉列表的所选选项会重置，但不会来自 purchaseInvoiceDetail.tax。它只是无法从 purchaseInvoiceDetail.tax 获取值并将其显示为下拉列表中的选定值。 为什么会这样？

Answer 1

dropdowns: Array<SelectItem[]>;


<div *ngFor="let dropdown of dropdowns">
  <div *ngFor="let taxOption of dropdown">
     <p-dropdown name="taxOption" [options]="taxOption" 
     [(ngModel)]="purchaseInvoiceDetail.tax"></p-dropdown>
  </div>
</div>

SelectItem 界面

export interface SelectItem {
  label: string;
  value: number;
}

这是您可以遵循的模式，只需根据您的行进行调整即可。