Angular模板迭代展示DATCRE/ISIN及JSON结构校验求助

一、JSON数据与接口校验结果 #

你的JSON不符合TypeScript接口定义，问题出在ORDDETAIL下的TITRE字段：

• 接口中TITRE明确定义为数组类型：TITRE: { ISIN: string }[]
• 但你的JSON里TITRE是单个对象，不是数组结构

修正后的合规JSON如下：

{
   "ORD_CLI":[{
         "DEPO":123248626491,
         "INTITULE1":"PORTEFEUILLE TB58",
         "PHONE":"00",
         "ORDDETAIL":[{
            "DATCRE":"2022-03-31",
            "TITRE":[
               {
                  "ISIN":"BE0947764743"
               }
            ]
         }]
      }]
}

二、Angular模板展示DATCRE和ISIN的修正逻辑 #

你之前出现「Property 'DATCRE' does not exist」报错，核心是没正确访问层级属性，再加上TITRE是数组需要嵌套遍历。修改后的模板代码如下：

<ng-container *ngFor="let portfolio of standingResponse.ORD_CLI">
   <tr *ngFor="let orderDetail of portfolio.ORDDETAIL">
      <td class="text-center">{{portfolio.DEPO | accountDash}}</td>
      <td>{{portfolio.INTITULE1}}</td>
      <td>{{portfolio.PHONE}}</td>
      <!-- 展示DATCRE字段 -->
      <td>{{orderDetail.DATCRE}}</td>
      <!-- 遍历TITRE数组展示ISIN -->
      <td>
         <span *ngFor="let titre of orderDetail.TITRE; let last = last">
            {{titre.ISIN}}{{last ? '' : ', '}}
         </span>
      </td>
   </tr>
</ng-container>

关键修改说明： #

1. 变量命名优化：把standingOrders改为portfolio、standingOrder改为orderDetail，避免层级混淆
2. 正确访问DATCRE：该字段属于orderDetail（即ORDDETAIL的每一项），需用orderDetail.DATCRE获取
3. 遍历TITRE数组：因为接口定义TITRE是数组，必须用*ngFor遍历每一个titre对象，再取titre.ISIN
4. 多ISIN分隔处理：用let last = last判断是否为最后一项，避免末尾出现多余逗号

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