Set a global class variable from inside an Angular 2 promise

Question

I ran into a strange problem when assigning a response to a global class variable from inside the observable. So, my program logic is as follows:

• Get the latest playlist id from the elastic search (I use elastic search from the type definition file). This returns me a PromiseLike to which I attach the then statement.

• Inside the promise resolution, I make another http call (e.g. observable)

• In Observed Subscription, I assign my global array as a response from the server.

The code works correctly, I get the answers as they should be, but I can not assign the variable to the global one.

Here is my code:

import {Component, OnInit} from '@angular/core';
import {PlaylistService} from '../api/services'

@Component({
    selector: 'app-playlists',
    templateUrl: './playlists.component.html',
    styleUrls: ['./playlists.component.css']
})
export class PlaylistsComponent implements OnInit {
    public playlists: any[] = [];

    constructor(private playlistService: PlaylistService) {

    }

    ngOnInit() {
        let that = this;
        this.playlistService.listIds().then((val) => { // <-- promise resolution
            return this.playlistService.getByIds(val).toPromise(); // <-- http get call which i then convert to promise for simplicity
        }).then((res) => {  // <-- resolution of the http get call
            console.log(this.playlists); <-- in this log, i get my desired results
            // here is my problem, this assignment doesn't happens
            this.playlists = res.data;  
        });
    }
}

The listIds function is as follows:

listIds() {
    return this.api.listing('playlist').then((body) => {
      let hits = body.hits.hits;
      return _.keys(_.groupBy(hits, '_id'));
    });
}

and here is my api.listing function (elastic search client)

listing(type: string) {
    let es = this.prepareES();
    return es.search({
            index: 'test',
            _source: ["_id"],
            type: type
    });
}

es.search

search (params: SearchParams): PromiseLike > ;

, ?

Answer 1

, , this.playlistservice.listIds(), . Angular2 .

:

 constructor(private playlistService: PlaylistService, private cdRef:ChangeDetectorRef) {

...

   ngOnInit() {
        let that = this;
        this.playlistService.listIds().then((val) => { // <-- promise resolution
            return this.playlistService.getByIds(val).toPromise(); // <-- http get call which i then convert to promise for simplicity
        }).then((res) => {  // <-- resolution of the http get call
            console.log(this.playlists); <-- in this log, i get my desired results
            // here is my problem, this assignment doesn't happens
            this.playlists = res.data; 
            this.cdRef.detectChanges(); 
        });
    }

Answer 2

this.playlistService.listIds() 

return this.playlistService.getByIds(val)

val , . ,

return this.playlistService.getByIds(this.playlistService.listIds())
       .then((results)=>{/*rest of logic here*/});