Angular如何映射键和值

Question

所以我正在尝试映射和对象。它有一个键，而那个键有一个值。 我从服务器获得了整个收据，这是付款部分（这是我收到的响应的预览）：

paragonSequenceNumber: null
payments: {CARD: 4, CASH: 8}
pkp: "BBBBBBBBBBBBBBBBBBBBB"

所以我正在映射它，然后在带有 *ngFor 的 html 中使用它，然后写出键的值。 这是我的 ReceiptDTO：

export interface ReceiptDTO {
        payments: {[key: string]: number }; // key: ReceiptPaymentType (enums)
}

这是我的 ReceiptViewModel

interface ReceiptViewModel {
  payments: {[key: string]: number }[]; // I'm not actually sure what to put here
}

这是 PaymentViewModel

interface PaymentViewModel {
  CASH: number;
  CARD: number;
  VOUCHER: number;
}

这就是我尝试使用的 ReceiptViewModel ,首先就这样使用吧：

payments: data.receipt.payments,

然后这样：

payments: Object.entries(data.receipt.payments).map(([key, value]) => {
        return <PaymentViewModel>{
          CASH: value.CASH,
          CARD: value.CARD,
          VOUCHER: value.VOUCHER,
        };
      })

但没有一项工作和我希望发生的事情是能够像这样在 html 中使用它：

<tbody *ngFor="let payment of receipt.payments">
        <tr>
          <th>{{'models.Receipt.payments.paymentType.CASH' | translate}}</th>
          <th>{{payment.CASH}}</th>
        </tr>
        <tr>
          <th>{{'models.Receipt.payments.paymentType.CARD' | translate}}</th>
          <th>{{payment.CARD}}</th>
        </tr>
        </tbody>

Answer 1

据我了解，您希望在 * ngFor 中显示为收据完成的不同类型的付款，因此我的以下答案基于该假设

你说你收到了这个回复

paragonSequenceNumber: null
payments: {CARD: 4, CASH: 8}
pkp: "BBBBBBBBBBBBBBBBBBBBB"

你的 ReceiptDTO 是这样映射的

export interface ReceiptDTO {
        payments: {[key: string]: number }; // key: ReceiptPaymentType (enums)
}

到目前为止一切都很好 在这里我认为对于 ReceiptViewModel 你需要像这样更新

这里为 PaymentTypeInfo 做一个这样的接口

interface PaymentTypeInfo {
    paymentTypeName: string;
    paymentTypeValue: number;
}

然后指定类型

This is my ReceiptViewModel

interface ReceiptViewModel {
  payments: PaymentTypeInfo[]; // basically array donates the different type of payment like cash, card, etc. then for each index i.e type of payment, which contain the paymentTypeName and it's value
}

这是您提到的 PaymentViewModel

interface PaymentViewModel {
  CASH?: number;
  CARD?: number;
  VOUCHER?: number;
}

根据我们分配的付款价值，我们需要像这样更新这个

payments: Object.entries(data.receipt.payments).map((key, value) => {
    const currentPaymentTypeInfo : PaymentTypeInfo = {
        paymentTypeName : key,
        paymentTypeValue: value
    }
    return currentPaymentTypeInfo;
};

一旦完成，我们需要像这样更新html部分

<tbody *ngFor="let payment of receipt.payments" >
    <tr>
        <th>Payment-Type : {{payment.paymentTypeName}}</th>
        <th>It's value : {{payment.paymentTypeValue}}</th>
</tbody >