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

该表是使用ie*ngFor数组填充的。PurchaseInvoiceDetailPurchaseInvoiceDetail[]

因此，表格的每一行中都存在一个单独的 p-dropdown。问题是，当我更改下拉列表的值并添加另一个产品时，表格会刷新，并且先前下拉列表的选定选项会重置，但不会从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>

选择项接口

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

这是您可以遵循的模式，只需使其适应您的行。