Angular2多维数组ng-for不能工作



我正在使用Angular2,所有工作良好,但我无法打印出多维数组,以下是代码:

class AppComponent {
    items:Array<Object>;
    constructor(http: Http) {
    http.get('data.json')
      .map(res => res.json())
      .subscribe(data => this.items = data);
  }
}

第一个简单的非多维数组的例子与预期的一样

[{
    "id": "1",
    "v2": "L'Oréal Paris",
    "v4": "Serum Absolute Advanced Age-Reversing Makeup"
}]
<div *ng-for="#item of items">
    {{item.v2}} {{item.v4}}
</div>

发出错误且不工作的问题:

[{
    "4940": {
        "id": "4940",
        "v2": "Pantene Pro-V",
        "v4": "Cleansing Conditioner"
},
    "4941": {
        "id": "4941",
        "v2": "Pantene Pro-V",
        "v4": "Conditioner"
},
    "4942": {
        "id": "4942",
        "v2": "Pantene Pro-V",
        "v4": "2in1 Shampoo and Conditioner"
}]

<div *ng-for="#item of items">
  <div *ng-for="#itemone of item">
    {{itemone.v2}} {{itemone.v4}}
  </div>
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++

我找到了一个解决方案,你需要在循环之前将对象转换为数组:

<div *ng-for="#item of items">
  <div *ng-for="#itemone of item | objToArr">
    {{itemone.v2}} {{itemone.v4}}
  </div>
</div>

这里是Pipe:

import { Pipe } from 'angular2/angular2';
@Pipe({
  name: 'objToArr',
  pure: false
})
export class ObjToArr {
  transform(object:any) {
    var newArray = []
    for (var key in object) {
        newArray.push(object[key]);
    }
    return newArray;
  }
}

根据所讨论的更新,您需要在循环之前将对象转换为数组:

<div *ng-for="#item of items">
  <div *ng-for="#itemone of item | objToArr">
    {{itemone.v2}} {{itemone.v4}}
  </div>
</div>

使用的管道如下:

import { Pipe } from 'angular2/angular2';
@Pipe({
  name: 'objToArr',
  pure: false
})
export class ObjToArr {
  transform(object:any) {
    var newArray = []
    for (var key in object) {
        newArray.push(object[key]);
    }
    return newArray;
  }
}

最新更新