html - 无法使用表中的列数组迭代 *ngFor 循环

Question

我有这样的表，我想对其进行迭代

Heating                    Diesel            Benzin         Fracht
43.10                      87.15             108.00                       
43.35                      87.40             108.25                           
43.80                      87.80             108.60         2394.00             

-----                      -----             -----           ----                              

这是我想插入到我的表中的 json 数据，这里第一个对象是一列，第二个对象是第二列，就像我需要插入 4 列一样。我不明白如何用 *ngFor 循环迭代它。如果我的问题有任何问题，请原谅。

[
      {
        "s4": "43,10",
        "s5": "43,35",
        "s6": "43,80",
        "s7": "43,90",
        "s8": "44,10",
        "s15": "64,25",
        "s9": "44,55",
        "s10": "43,20",
        "s11": "43,90",
        "s16": "54,00"
      },
      {
        "s4": "87,15",
        "s5": "87,40",
        "s6": "87,80",
        "s7": "87,90",
        "s8": "88,05",
        "s15": "121,05",
        "s9": "88,60",
        "s10": "87,30",
        "s11": "88,00",
        "s16": "80,90"
      },
      {
        "s4": "108,00",
        "s5": "108,25",
        "s6": "108,60",
        "s7": "108,70",
        "s8": "108,85",
        "s15": "119,65",
        "s9": "109,30",
        "s10": "108,50",
        "s11": "109,00",
        "s16": "92,25"
      },
      {
        "s4": "",
        "s5": "",
        "s6": "2394,02",
        "s7": "12,29",
        "s8": "2395,46",
        "s15": "",
        "s9": "2386,92",
        "s10": "22:05",
        "s11": "",
        "s16": ""
      }
    ] 

 <table *ngIf="indexdata">
      <tr style="color: #3B6593" >
        <th><strong>Heizöl</strong></th>
        <th><strong>Diesel</strong></th>
        <th><strong>Benzin</strong></th>
        <th><strong>Facht</strong></th>
      </tr>
      <tr *ngFor="let index of indexdata;let i=index">
         <td>{{index.s4}}</td>
         <td>{{index.s5}}</td>
         <td>{{index.s6}}</td>
         -----
         -----
      </tr>
      </table>

Answer 1

你的代码应该是

 <table *ngIf="indexdata">
        <tr style="color: #3B6593">
            <th><strong>Heizöl</strong></th>
            <th><strong>Diesel</strong></th>
            <th><strong>Benzin</strong></th>
            <th><strong>Facht</strong></th>
        </tr>
        <tr>
            <td *ngFor="let indexvalue of indexdata">
                <table>
                    <tr *ngFor="let indexobj of indexvalue | keys">
                        <td>
                            {{indexobj.value}}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

您可以创建自定义管道以返回每个元素的键列表。像这样:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}