如何在Angular 2模板中获取json对象的长度

Question

我有一个像这样的json数组。

[
  {
    "variations": {
      "title": {
        "newValue": "test new value1",
        "oldValue": "test old value1"
      }
    }
  },
  {
    "variations": {
      "data": {
        "newValue": "new data",
        "oldValue": "httpold data"
      },
      "length": {
        "newValue": "48",
        "oldValue": "9.00"
      }
    }
  }
]

从这个我想得到的HTML的变化的长度，还渲染和值来查看。

<table class="table table-bordered table-hover">
                        <thead class="table-title">
                            <tr>
                                <th class="text-center">Field count</th>
                                <th class="text-center">Field Name</th>
                                <th class="text-center">Old Value</th>
                                <th class="text-center">New Value</th>
                            </tr>
                        </thead>
                        <tbody *ngFor="let data of datas">
                            <tr>
                                <td class="text-left" rowspan="2">{{data.variations.length}}</td>
                                <td class="text-left" rowspan="2"></td>
                                <td class="text-left" rowspan="2"></td>
                            </tr>
                            <tr>
                            </tr>
                        </tbody>
                    </table>

在上面的代码我怎样才能得到length的variation数据。还需要呈现并向视图显示所有新字段和旧字段值。谁能帮帮我吗

Answer 1

组件侧：

objectKeys = Object.keys;

模板面：

<tbody *ngFor="let data of datas">
    <tr>
        <td class="text-left" rowspan="2">{{objectKeys(data.variations).length}}</td>
        ...
    </tr>
    ...
</tbody>

工作演示