Angular 2 Dashboard приложение веб-API вызов при инициализации

Question

У меня есть приложение на приборной панели, написанное на угловом 2. Я использую API-вызов для данных. После получения данных я отображаю их на графике. Как демонстрационная ссылка ниже. Когда я делаю вызов API из метода ngOnInit() dashboardcomponent, я получаю нулевой ответ, но если я делаю то же самое, используя событие нажатия кнопки, все данные загружаются, как и ожидалось. Что является лучшим местом для инициации вызова API и заполнения всех данных в пользовательском интерфейсе при первой загрузке?

http://preview.themeforest.net/item/avenxo-responsive-angularjs-html-admin/full_screen_preview/11660185?ref=cirvitis&clickthrough_id=1107952073&redirect_back=true

Answer 1

ngOnInit() был в порядке, чтобы сделать вызов API. У меня не было четкой картины функции подписки. Мне пришлось сделать несколько сложных вычислений в моем файле машинописи перед рендерингом в пользовательском интерфейсе. Я должен делать это только в методе подписки. не присваивать глобальные переменные и делать точечный оператор и ожидать, что все будет работать как шарм. Я обнаружил, что до тех пор, пока подписчик не получит подписку, данные не будут храниться для вас. Это означает, что если у вас большой json с вложенными элементами, вы должны сделать this.data.innerdata[0].finalvalue[0] в методе подписки, а не передавать его методу и делать все самое интересное.

Передайте вашу информацию в initData(данные) и сделайте все расчеты и выполните рендеринг.

export class Recent implements OnInit{
allFiles;
public allFiles_error:Boolean = false;
openModalWindow:boolean=false;
images = [];
currentImageIndex:number;
opened:boolean=false;
imgSrc:string;

constructor(private _recentService: RecentService) { }

ngOnInit() {
    this._recentService.getJson().subscribe(
        data => initData(data),
        err => handleError(),
        () => console.log('Completed!'));
}

initData(data){
    this.allFiles = data;
    console.log("allFiles: ", this.allFiles);
    console.log(this.allFiles.length);
    for(var i = 0; i < this.allFiles.length; i++) {
        this.images.push({
        thumb: this.allFiles[i].url,
        img: this.allFiles[i].url,
        description: "Image " + (i+1)
        });
    }
    console.log("Images: ", this.images);
    console.log(this.images.length);
    console.log(this.images);
    console.log(typeof this.images);
}

handleError() {
    this.allFiles_error = true;
}

}

Answer 2

Чтобы построить ваше приложение так, как задумал команда Angular, нужно будет помещать любые вызовы API в сервис для инъекций. Проверьте @Injectable. Оттуда вы добавляете сервис в любой компонент или директиву, которые должны выполнять вызовы API.

Кроме того, вызовы API, скорее всего, являются асинхронными, что может быть причиной того, что вы получаете нулевое значение. Они должны быть обработаны в Observables или Promises/Callbacks.