Nativescript Angular RadListView не работает при извлечении данных с удаленного сервера

Question

Я реализовал, следуя примерам git RadListView, и работает нормально, когда данные извлекаются из файла. json (как в примере git)

Вместо этого, когда я go далее и попытался получить данные с удаленного сервера вместо результата RadListView, чтобы он был пустым.

Итак, что я делаю не так? Ниже фрагмент из моего исходного кода:

private initDataItems() {

        // NOT WORKING: Fetching data from remote
        // see the implementation of getAllRankings() below
        this.rankingService.getAllRankings().subscribe(
            (res) => {
                this._sourceDataItems = new ObservableArray<DataItem>();
                // tslint:disable-next-line: prefer-for-of
                for (let i = 0; i < res.queryresult.length; i++) {
                    if (androidApplication) {

                        this._sourceDataItems.push(new DataItem(i, posts.names[i],
                            "This is item description",
                            posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));

                        console.log(this._sourceDataItems);
                    }
                }
            }
        );

        /*
        // WORKING: Fetching data from .json file (post.json)
        this._sourceDataItems = new ObservableArray<DataItem>();
        for (let i = 0; i < posts.names.length; i++) {
            if (androidApplication) {
                this._sourceDataItems.push(new DataItem(i, posts.names[i],
                    "This is item description",
                    posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
            } else {
                this._sourceDataItems.push(new DataItem(i,
                    posts.names[i], "This is item description",
                    posts.titles[i], posts.text[i], "res://" + posts.images[i]));
            }
        }
        */
    }
}

, где getAllRankings () выглядит так:

getAllRankings() {
        return this.http.get<{ queryresult: any }>("http://api.dev.blabla.com/posts");
    }

Answer 1

Создайте объект массива в начале, чтобы ваш шаблон мог что-то визуализировать. Затем, поскольку обратный вызов от вашего сетевого вызова будет находиться за пределами зоны angular, поместите его обратно внутрь.

import { ..., NgZone } from '@angular/core';

constructor( ..., private zone: NgZone) {
  ...
}

private initDataItems() {

        this._sourceDataItems = new ObservableArray<DataItem>();

        // see the implementation of getAllRankings() below
        this.rankingService.getAllRankings().subscribe(
            (res) => {
                // tslint:disable-next-line: prefer-for-of
                for (let i = 0; i < res.queryresult.length; i++) {
                    if (androidApplication) {

                        this.zone.run(() => {
                            this._sourceDataItems.push(new DataItem(i, posts.names[i],
                                "This is item description",
                                posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));

                            console.log(this._sourceDataItems);
                        });
                    }
                }
            }
        );
}

В качестве альтернативы, вы могли бы также сделать что-то с детектором изменений.

Примечание : чтобы избежать одновременного нажатия по одному и инициировать серию последовательных изменений, лучше использовать спред pu sh.

this._sourceDataItems.push(...res.queryresult.map((res) => new DataItem( ... )));