Ich habe eine externe API
, die eine Liste zurückgibt. Ich habe folgend in ServiceNativescript: Angular2 ListView nicht aktualisiert, während Observable
load() {
let headers = new Headers();
headers.append("Authorization", Config.token);
return this._http.get(Config.apiUrl + "grocery/list", {headers: headers})
.map(res => res.json())
.map(data => {
let groceryList = [];
data.list.forEach((grocery) => {
groceryList.push(new Grocery(grocery._id, grocery.name));
});
return groceryList;
})
.catch(this.handleErrors);
}
Ich habe den folgenden Code in der Komponente:
ngOnInit() {
this._groceryService.load()
.subscribe(loadedGroceries => {
loadedGroceries.forEach((groceryObject) => {
console.dir(groceryObject);
this.groceryItems.unshift(groceryObject);
});
});
// It works if I uncomment this. It will just render one item, still nothing from API
// this.groceryItems.unshift(new Grocery('iuiu', 'jjjjj'));
}
Wenn ich die letzte Zeile Kommentar- darüber auf den ListView
rendert. Mein ListView
ist Templat entfernt und sehen aus wie folgt:
<GridLayout>
<ListView [items]="groceryItems" class="small-spacing">
<template let-item="item">
<Label [text]="item.name" class="medium-spacing"></Label>
</template>
</ListView>
</GridLayout>
Die API gibt so etwas wie dieses:
{
"success": true,
"msg": "Lists found!",
"list": [
{
"_id": "574a324a18cadad00665a7f3",
"name": "Carrot",
"userid": "57482f309ae6c358703066ca",
"completed": 0,
"__v": 0
}
]
}
Hey Deepak, ich bin mir nicht sicher was genau Geht hier falsch, aber ich habe diese Art von Problem auch getroffen. Vielleicht möchten Sie den Wechsel zu einem RxJS Observable für Ihre Liste sowie die asynchrone Pipe in Betracht ziehen. Das scheint nur die Art zu sein, wie Angular diese Art von Dingen implementieren will, und ich hatte mehr Glück mit dieser Herangehensweise. Der "eckige" Zweig des "Groceries Repo" hat eine Beispiel-Implementierung, die Sie sich https://github.com/NativeScript/sample-Groceries/tree/angular ansehen können. –