ngFor数据结构

Question

我的数据结构存在一些错误。我有resTest包含两个对象和键，如pop，省和地址。我可以想到几个选项来做到这一点，但最简单的方法是什么？

HTML

 var columnsA = ["Pop","Province","Address"];
var columnsB = ["Pop","Province","Address"];
var res = {};
res['A'] = this.columns;
res['B'] = this.columns;

    this.resTest = JSON.parse(JSON.stringify(getRes));

    //this.resTest = {A: Array(24), B: Array(24)};

    <table>
      <thead>
        <tr>
          <th>RegionA</th>
          <th>RegionB</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of this.resTest">
          <td>{{item?.A}}</td>
          <td>{{item?.B}}</td>
        </tr>
     </tbody>
     </table>

错误

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables

我期待这个数据结构

  

{A：{...}，B：{...}}

这就是我所拥有的

  

{A：Array（24），B：Array（24）};

表格

Answer 1

由于ngFor需要一个数组，因此需要重构JSON解析的对象。这可以通过Object.keys和Array.prototype.map方法完成。此外，您应该手动对数组进行排序，因为Object.keys不保证订单。

resTest = { A: [1, 2, 3], C: [3, 2, 1], B: [0, 0, 0] };

resTest = Object
  .keys(resTest)
  .sort((a, b) => {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  })
  .map(k => ({[k]: resTest[k]}));

// [{A: [1, 2, 3]}, {B: [0, 0, 0]}, {C: [3, 2, 1]}]

之后，您就可以将resTest传递给ngFor。

要将数据转换为两列数据集，请再次使用Array.prototype.map：

resTest = { A: [1, 2, 3], B: [9, 8, 7] };

resTest = resTest['A']
  .map((r, index) => ({ 'A': resTest['A'][index], 'B': resTest['B'][index] }));

// [{A: 1, B: 9}, {A: 2, B: 8}, {A: 3, B: 7}]

在这种情况下，您需要确保A和B属性具有相同的长度。