Nativescript：Angular2 Observableを使用中にリストビューが更新されない

Question

リストを返す外部APIがあります。私はその上の最後の行がListView上でレンダリングされたコメントを解除する場合は

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

：私は、コンポーネントに次のコードを持っているサービス

に

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

を次のようしています。私ListViewは離れテンプレートと以下のように見えるさ：

<GridLayout> 
    <ListView [items]="groceryItems" class="small-spacing"> 
    <template let-item="item"> 
     <Label [text]="item.name" class="medium-spacing"></Label> 
    </template> 
    </ListView> 
</GridLayout> 

APIは、このようなものを返す：あなたはloadメソッドsetTimeout(() => {this.cd.markForCheck();}, 0);を呼び出した後

{ 
    "success": true, 
    "msg": "Lists found!", 
    "list": [ 
    { 
     "_id": "574a324a18cadad00665a7f3", 
     "name": "Carrot", 
     "userid": "57482f309ae6c358703066ca", 
     "completed": 0, 
     "__v": 0 
    } 
    ] 
} 

Answer 1

代わりforEach()とpush()のmapを使用するだけで、ヒント

は同じですが、より簡潔な操作を行う必要があります。

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 => 
      data.list.map(grocery => new Grocery(grocery._id, grocery.name)) 
     ) 
     .catch(this.handleErrors); 
} 

Answer 2

あなたはこの行を追加することができます。これにより、新しい項目を配列にプッシュするたびにListViewが更新されます。私はいくつかのコードスニペットの下に取り付けています：

import {Component, Input, ChangeDetectionStrategy, ChangeDetectorRef} from "@angular/core"; import {Http, Headers, Response, ResponseOptions, HTTP_PROVIDERS} from "@angular/http"; import {Observable, BehaviorSubject} from "rxjs/Rx";

constructor(private _http: Http, private cd: ChangeDetectorRef){ 

     this.groceryItems=[]; 
    } 



ngOnInit() { 
     this.groceryItems.push(new Grocery('3','test', false, false)); 
     this.load() 
      .subscribe(loadedGroceries => { 
       loadedGroceries.forEach((groceryObject) => { 
        this.groceryItems.push(new Grocery('3',groceryObject.name, false, false)); 
        console.log(this.groceryItems.length); 
        console.log(groceryObject.name); 
       }); 
       this.cd.markForCheck(); 
      }); 
    }