Angular 如何 map 鍵和值

Question

所以我正在嘗試 map 和 object。 它有一個鍵，而那個鍵有一個值。 我從服務器獲得了整個收據，這是付款部分（這是我收到的響應的預覽）：

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

所以我正在映射它，然后在 html 中使用它和 *ngFor，然后寫出鍵的值。 這是我的收據DTO：

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 >