在Angular 11中显示选定的项目名称而不是选定的ID

Question

当我从选择下拉列表中选择一个值时，我只能打印 ID，但我想显示 Description 而不是 Id。我只想显示名称，但我想将选定的值 Id 发送到 API。

Result

component.ts

pay = [];

paymentForm = new FormGroup({
   paymentType: new FormControl('', []),
   description: new FormControl('', []),
   amount: new FormControl('', []),
});

btnAddToPayment(payment: SalePayment) {
  this.cartService.addToPaymentCart(payment);
  this.pay.push(this.paymentForm.get('paymentType').value);
}

用于选择的 HTML

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

btnAddToPayment 的 HTML

    <div class="input-group-prepend">
                    <span class="btn btn-default input-group-text" (click)="btnAddToPayment(paymentForm.value)">
                      <i class="fa fa-plus-square" style="color: green"></i>
                    </span>
          </div> 

表格

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

界面

export class SalePayment {
  SaleId: string;
  PaymentTypeId: number;
  Description: string;
  Amount: number;
  Balance: number;
}

1. 我想将选定的值推送到数组并将它们保存到数据库。可能有多次付款。

Answer 1

根据您的选择下拉菜单，您将值字段设置为另存为付款类型

• 这种做法是正确的

这样使用来显示名称 |描述为 td 元素

<td>
  <span *ngFor="let pay of selectPayment" [hidden]="pay?.Id !== paym?.paymentType" >
     {{pay?.name}}
  </span>
</td>

Answer 2

这样使用

 <tr *ngFor="let paym of payment">
          <!--<td>{{paym.paymentType.Description}}</td>-->
          <td>
            <span *ngFor="let pay of selectPayment" [hidden]="pay?.Id !== paym?.paymentType" >
               {{pay?.name}}
            </span>
          </td>
          <td>{{paym.amount | currency:'RS: '}}</td>
          <td>{{currentDate | date:'yyyy-MM-dd'}}</td>
 </tr>

Answer 3

您可以使用 find 过滤出具有所需描述的对象。 像这样的东西（我假设您正在使用表单值填充支付数组。如果不是这样，请告诉我）

btnAddToPayment(payment: SalePayment) {
  this.cartService.addToPaymentCart(payment);
   const selectedObj = selectPayment.find((item:any)=>{
      item.Id === payment.paymentType
   });
   if(selectedObj) {
     payment['paymentName'] = selectedObj.Description;
   }
  this.pay.push(this.paymentForm.get('paymentType').value);
}

在 HTML 中，

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