Skip to main content

Angular2 ngFor ajuda com loop

Tenho um arquivo nvi.json que está desta forma:

[
     {
    "abbrev": "gn",
    "book": "Gênesis",
    "chapters": [
      {
        "1": {
          "1": "...",
          "2": "..."
        }
      },
      {
        "2": {
          "1": "...",
          "2": "..."
        }
      },
      {
        "3": {
          "1": "...",
          "2": "..."
        }
      }
     ]
     }
    ]

E estou acessando assim:

export class BookPage {
    public chapters: Array<string>;
    private url: any = "../../assets/nvi.json";

    constructor(public navCtrl: NavController, private NavParams: NavParams, public http: Http) {
    let id = NavParams.get('id');

    this.http.get(this.url).map(res => res.json())
      .subscribe(data => {
        this.chapters = data[id].chapters[0];
        console.log(this.chapters);
      });
      }

this.chapters retorna o primeiro capítulo onde contem os versículos, mas eu não estou conseguindo fazer um loop destes versículos.

<div *ngFor="let item of chapters">
     {{item}}
    </div>

Console:

EXCEPTION: Error in ./BookPage class BookPage - inline template:33:5 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'.      NgFor only supports binding to Iterables such as Arrays.
Anderson
  • 43
  • 1
  • 5