PrimeNG 下拉选择选项在与界面绑定时重置 属性
PrimeNG dropdown selected option resets when bound with interface property
这就是我声明 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
获取值并将其显示为下拉列表中的选定值。
为什么会这样?
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;
}
这是您可以遵循的模式,只需根据您的行进行调整即可。
这就是我声明 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
获取值并将其显示为下拉列表中的选定值。
为什么会这样?
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;
}
这是您可以遵循的模式,只需根据您的行进行调整即可。