如何遍历JSON文件读取BLOCAGES下所有BLOCAGE的QTE与DTE字段

你当前代码仅提取了BLOCAGE数组的第一个元素，且用单个对象statusLine存储数据，因此只能展示一条记录。修改方法如下：

1. 修改prepareDataForBlocage方法 #

把原来提取单个元素的逻辑改为存储整个处理后的数组，同时兼容接口可能返回单个对象而非数组的极端场景，示例代码：

prepareDataForBlocage(response) {
    this.spinners.blockDetails = false;
    if (response['RETURNCODE'] == "OKK00") {
        const blocageList = response['BLOCAGES']['BLOCAGE'];
        this.statusLines = Array.isArray(blocageList) 
          ? blocageList.map(item => ({
              quantity: item['QTE'],
              update: item['DAT'] // 如果你实际需要提取的是DTE字段，把此处的DAT替换为DTE即可
            }))
          : [{
              quantity: blocageList['QTE'],
              update: blocageList['DAT']
            }];
    }
}

2. 修改HTML模板 #

用*ngFor指令遍历statusLines数组循环渲染行：
如果你的Angular版本支持同一元素同时使用*ngFor和*ngIf，可以直接写：

<table class="table table-striped">
   <tr style="background-color: #f8f9fa; font-weight: bold;">
      <td style="width: 13%;">Quantity</td>
      <td style="width: 13%;">Reason</td>
      <td style="width: 13%;">Date</td>
      <td style="width: 13%;">Référence</td>
   </tr>
   <tr *ngFor="let line of statusLines" *ngIf="line.quantity != 0">
      <td>
         {{line.quantity | number:'1.2-2' }}
      </td>
      <td></td>
      <td>
         {{line.update | dateddmmyyyy }}
      </td>
      <td>
      </td>
   </tr>
</table>

如果版本不支持两个结构型指令写在同一元素上，用<ng-container>包裹处理即可：

<table class="table table-striped">
   <tr style="background-color: #f8f9fa; font-weight: bold;">
      <td style="width: 13%;">Quantity</td>
      <td style="width: 13%;">Reason</td>
      <td style="width: 13%;">Date</td>
      <td style="width: 13%;">Référence</td>
   </tr>
   <ng-container *ngFor="let line of statusLines">
      <tr *ngIf="line.quantity != 0">
         <td>
            {{line.quantity | number:'1.2-2' }}
         </td>
         <td></td>
         <td>
            {{line.update | dateddmmyyyy }}
         </td>
         <td>
         </td>
      </tr>
   </ng-container>
</table>

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