简体   繁体   中英

Angular2 Multidimensional array ng-for not working

I am using Angular2, all working good, but am unable to printout multidimensional arrays, here is the code:

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

First example with simple non-multidimensional array works as expected

[{
    "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>

Problem that emits error and does not work:

[{
    "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>

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

I've found a solution, you need to convert object to array before loop:

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

And here is the 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;
  }
}

As per the update in question, you need to convert object to array before looping over it:

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

The pipe used is below:

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;
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM