Assign an observable to an array in angular 4

Question

I am trying to initialize an array from an observable. However I get an compilation error saying:

Component:

export class LeaderBoardComponent implements OnInit {
    leaderBoardTableData: Array<LeaderBoardModel>;
    constructor(private appStore: Store<AppStore>,

        private leaderBoardService: LeaderBoardService) {
        this.leaderBoardService.getLeaderBoard()
            .skipWhile((data) => { return _.isEmpty(data) })
            .subscribe((data) => {
                if (!_.isEmpty(data)) {
                    this.leaderBoardTableData = this.leaderBoardService.getLeaderBoard();
                }
            });
    }

Service:

 getLeaderBoard(): Observable<LeaderBoardModel> {
        return this.httpUtil.get(this.appConstants.END_POINT_LEADERBOARD)
            .map(response => <LeaderBoardModel>response.json());
    }

samAlvin · Accepted Answer · 2017-08-18 14:59:41Z

3

getLeaderBoard() method returns an observable of a single LeaderBoardModel element. So upon subscription you have to push the subscribed value (which is data) to your leaderBoardTableData in the component.

I think it should be:

.subscribe((data) => {
    if (!_.isEmpty(data)) {
        this.leaderBoardTableData = [data];
        // or `this.leaderBoardTableData.push(data);` , you have to make sure that `leaderBoardTableData` is already instantiated though
    }
});

answered Aug 18, 2017 at 14:59

samAlvin

1,6781 gold badge12 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lansana Camara · Accepted Answer · 2017-08-18 15:03:32Z

You must subscribe the this.leaderBoardService.getLeaderBoard() because you cannot assign an Observable to an array.

So do this in your code:

this.leaderBoardService.getLeaderBoard().subscribe(data => {
    this.leaderBoardTableData = data;
});

If you wanted leaderBoardTableData to be equal to an observable so that your code did not have to change, you could just change the type definition from:

leaderBoardTableData: Array<LeaderBoardModel>;

To:

leaderBoardTableData: Observable<LeaderBoardModel>;

Also be cognizant of the fact that you have a generic Array type, which means the return value of your observable must also be a generic Array type or you will get a similar type checking error from the compiler.

Collectives™ on Stack Overflow

Assign an observable to an array in angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related