如何在没有角度2的硬编码的情况下迭代表循环

时间:2017-05-17 06:16:35

标签: angular angular2-directives

我是Angular2的新手,我有类似这样的json数据,我需要在表格中进行迭代。每个键值都不同,所以我需要插入每个键值或者某些东西可以做得更聪明。如果我有数百行怎么办?

    [
              {
        "medg01morl": "908,25",
        "medg01morh": "910,25",
        "medg01mitl": "905,00",
        "medg01mith": "907,00",
        "medg01abentl": "888,75",
        "medg01abenth": "890,75",
        "medg01vortagl": "889,50",
        "medg01vortagh": "891,50",
        "medd01morl": "936,25",
        "medd01morh": "938,25",
        "medd01mitl": "933,00",
        "medd01mith": "935,00",
        "medd01abentl": "916,75",
        "medd01abenth": "918,75",
        "medd01vortagl": "914,50",
        "medd01vortagh": "916,50",
              }
            ]

aramed:Array<Object>;

    <table *ngFor="let med of aramed">
                <tr style="color: #3B6593">
                    <th><strong>Quality</strong></th>
                    <th><strong>19:00</strong></th>
                    <th><strong>13:00</strong></th>
                    <th><strong>07:00</strong></th>
                    <th><strong>19:00</strong></th>
                </tr>
                <tr>
                    <td style="color: orange"><strong>Super95</strong></td>
                    <td> {{med.medg01morl}} / {{med.medg01morh}} </td>
                    <td> {{med.medg01mitl}} / {{med.medg01mith}} </td>
                    <td> {{med.medg01abentl}} / {{med.medg01abenth}} </td>
                    <td> {{med.medg01vortagl}} / {{med.medg01vortagh}} </td>
                </tr>
                   <tr>
                    <td style="color: orange"><strong>Eurobob</strong></td>
                    <td> {{med.medd01morl}} / {{med.medd01morh}} </td>
                    <td> {{med.medd01mitl}} / {{med.medd01mith}} </td>
                    <td> {{med.medd01abentl}} / {{med.medd01abenth}} </td>
                    <td> {{med.medd01vortagl}} / {{med.medd01vortagh}} </td>
                </tr>
            </table>

1 个答案:

答案 0 :(得分:0)

myArr = [
  'super95': {
    "medg01morl": "908,25",
    "medg01morh": "910,25",
    "medg01mitl": "905,00",
    "medg01mith": "907,00",
    "medg01abentl": "888,75",
    "medg01abenth": "890,75",
    "medg01vortagl": "889,50",
    "medg01vortagh": "891,50",
    "medd01morl": "936,25",
    "medd01morh": "938,25",
    "medd01mitl": "933,00",
    "medd01mith": "935,00",
    "medd01abentl": "916,75",
    "medd01abenth": "918,75",
    "medd01vortagl": "914,50",
    "medd01vortagh": "916,50",
  },
  {},
  {},
  ...
]

<table>
  <tr style="color: #3B6593">
    <th><strong>Quality</strong></th>
    <th><strong>19:00</strong></th>
    <th><strong>13:00</strong></th>
    <th><strong>07:00</strong></th>
    <th><strong>19:00</strong></th>
  </tr>
  <tr *ngFor="let key of keys(myArr)">
    <td style="color: orange"><strong>{{key}}</strong></td>
    <td *ngFor="let key of keys(myArr[key]); let ndx === index;">
      <ng-container *ngIf="ndx % 2 === 0">
        {{myArr[key][key]}} / {{myArr[key][keys[ndx + 1]]}}
      </ng-container>
    </td>
  </tr>
</table>