Angular 11 下拉选显示描述而非ID、提交传ID及多支付存储问题

1. 修改下拉框绑定逻辑 #

将下拉选项的value绑定改为Angular专属的ngValue，支持绑定完整对象，这样选中后表单控件能拿到该支付类型的全部属性（包含Id和Description）：

<select formControlName="paymentType" class="mb-3 form-control" id="Payment">
      <option value="" disabled selected>Payment type</option>
      <option *ngFor="let pay of selectPayment" [ngValue]="pay">
        {{pay.Description}}
      </option>
 </select> 

2. 调整新增支付项的组装逻辑 #

按照你定义的SalePayment接口规范组装数据，既保留后续提交需要的支付类型ID，也留存展示用的Description字段：

btnAddToPayment(paymentFormVal: any) {
  // 组装符合接口要求的支付对象
  const salePayment: SalePayment = {
    SaleId: '', // 按需补充你的业务字段赋值
    PaymentTypeId: paymentFormVal.paymentType.Id, // 提交API需要的ID字段
    Description: paymentFormVal.paymentType.Description, // 页面展示用的描述字段
    Amount: paymentFormVal.amount,
    Balance: 0 // 按需补充你的业务字段赋值
  }
  this.cartService.addToPaymentCart(salePayment);
  this.pay.push(salePayment);
  // 可选：新增后重置表单
  this.paymentForm.reset();
}

3. 调整列表展示逻辑 #

直接取对象里的Description字段展示即可，你之前注释的代码可以直接启用：

<tr *ngFor="let paym of pay">
      <td>{{paym.Description}}</td>
      <td>{{paym.Amount | currency:'RS: '}}</td>
      <td>{{currentDate | date:'yyyy-MM-dd'}}</td>
</tr>

4. API提交处理 #

提交时直接取每个支付项的PaymentTypeId字段传递即可，完全符合后端接口要求，不用额外做转换。

内容的提问来源于stack exchange，提问作者valdimar