在 HTML 表格中逐行显示变量 NUM 的所有值

Question

我希望变量

NUM

的所有值在HTML表格中逐行显示，你知道我该怎么做吗？

这是 JSON 文件：

{
       
        {
            "DOSTT": 973053215042,
            "INTITULE1": "YCONS",
            "PHONE": "0999999999999",
            "TOMANY": "FALSE",
            "PREPTF": [
                {
                    "NUM": 2555452,
                    "DOSTT": 973053215042,
                    "SVM": 347075,
                    "ISIN": "BE0003470755",
                    "LABEL": "SOLVAY BE",
                    "QUANTITE": 100.00,
                    "DATE": "2024-09-30",
                    "TYPE": "IN",
                    "PERSONNE_CONTACT": "ttt",
                    "CONTREPARTIE": "tt",
                    "TEL": 11,
                    "FAX": 0,
                    "STATUT": 1,
                    "STATUT_LIB": "Encodé",
                    "REF_ALPHA": "",
                    "REF_RBC": "",
                    "TRADE_DATE": "0001-01-01",
                    "VALUE_DATE": "0001-01-01",
                    "TRAITEMENT_DATE": "0001-01-01",
                    "ANNULATION_DATE": "0001-01-01",
                    "RECEPTION_DATE": "0001-01-01",
                    "REM1": "777",
                    "REM2": "777",
                    "COURS_MOYEN_ACHAT": 33.930000,
                    "ACHAT_DATE": "2024-09-30",
                    "PMBIS": "N",
                    "TIS": 0.000000,
                    "CHANGEMENT_BENEF_ECO": "O"
                },
                {
                    "NUM": 2555453,
                    "DOSTT": 973053215042,
                    "SVM": 10126089,
                    "ISIN": "FR0000120628",
                    "LABEL": "AXA",
                    "QUANTITE": 100.00,
                    "DATE": "2024-09-30",
                    "TYPE": "IN",
                    "PERSONNE_CONTACT": "ttt",
                    "CONTREPARTIE": "tt",
                    "TEL": 11,
                    "FAX": 0,
                    "STATUT": 1,
                    "STATUT_LIB": "Encodé",
                    "REF_ALPHA": "",
                    "REF_RBC": "",
                    "TRADE_DATE": "0001-01-01",
                    "VALUE_DATE": "0001-01-01",
                    "TRAITEMENT_DATE": "0001-01-01",
                    "ANNULATION_DATE": "0001-01-01",
                    "RECEPTION_DATE": "0001-01-01",
                    "REM1": "777",
                    "REM2": "777",
                    "COURS_MOYEN_ACHAT": 32.050000,
                    "ACHAT_DATE": "2024-09-30",
                    "PMBIS": "N",
                    "TIS": 0.000000,
                    "CHANGEMENT_BENEF_ECO": "O"
                }
            ]
        }
       ...
    ],
    "RETURNLIST": []
}

我的 html 预览：S

模板

<ng-container *ngIf="PRE && PRE.length > 0">
   <table>
      <tr *ngFor="let preItem of PRE">
         <td *ngFor="let prePtfItem of preItem.PREPTF">
            {{ prePtfItem.NUM}}
         </td>
      </tr>
   </table>
</ng-container>

接口.ts

import { ApiResponse } from "src/shared/types/api.response";

export interface PREItem extends ApiResponse {
    DOSTT: any;
    INTITULE1: string;
    PHONE: string;
    PREPTF: PREPTFItem[];
  }
  
  export interface PREPTFItem {
    LABEL: string;
    TYPE: string;
    QUANTITE: number;
    STATUT: number; 
    NUM: number;
    ISIN: string;
    STATUT_LIB: string;
    REF_RBC: string;

  }
  

逻辑是这样的

overviewTransfers(account: string): void {
   this.service.overviewTransfers(account).pipe(
     takeUntil(this.unsubscribe$)
   ).subscribe(res => {
     if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
       this.PRE = res["PRE"];
     }
   });
 }

谢谢您的帮助。

Answer 1

将

NUM

值放入表格的行，而不是单元格。这应该可以解决您的问题：

<ng-container *ngIf="PRE && PRE.length > 0">
    <table>
        <ng-container *ngFor="let preItem of PRE">
            <tr *ngFor="let prePtfItem of preItem.PREPTF">
                <td>{{ prePtfItem.NUM}}</td>
            </tr>
        </ng-container>
   </table>
</ng-container>