Angular Primeng table not displaying retrieved data from Spring REST-CodePudding

I'm trying to use a PrimeNg table component that retrieves data from a spring (not spring boot) rest service. The data is being retieved but it's not displayed in the table. Seems that the subscribe function is called after ngOnInit and so after the getUsers function. What am i doing wrong?

[webpack-dev-server] Disconnected! index.js:551:21
[webpack-dev-server] Trying to reconnect... index.js:551:21
Lay-out werd geforceerd voordat de pagina volledig was geladen. Als stylesheets nog niet zijn geladen, kan dit een flits van onopgemaakte inhoud veroorzaken. web-client-content-script.js:1:1217826
[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. index.js:551:21
Angular is running in development mode. Call enableProdMode() to enable production mode. core.mjs:24833:16
TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object. web-client-content-script.js:1:83135
Functiebeleid: niet-ondersteunde functienaam ‘clipboard-write’ wordt overgeslagen. 2 web-client-content-script.js:1:201378
Functiebeleid: niet-ondersteunde functienaam ‘clipboard-write’ wordt overgeslagen. web-client-content-script.js:1:262286
Lay-out werd geforceerd voordat de pagina volledig was geladen. Als stylesheets nog niet zijn geladen, kan dit een flits van onopgemaakte inhoud veroorzaken. webclient-infield.html
UserDataSource user.datasource.ts:11:16
UserRepository user.repository.ts:10:16
getUsers 2 user.datasource.ts:15:16
UserComponent user.component.ts:11:16
ngOnInit user.component.ts:17:16
To fast user.repository.ts:20:16
Array []
user.repository.ts:21:16
To slow user.repository.ts:12:20
Array(6) [ {…}, {…}, {…}, {…}, {…}, {…} ]
user.repository.ts:13:20

user.datasource.ts:

import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Inject, Injectable, InjectionToken } from "@angular/core";
import { Observable } from "rxjs";
import { User, UserResponse } from "./user.model";

export const REST_URL = new InjectionToken("rest_url");

@Injectable()
export class UserDataSource {
    constructor(private httpClient: HttpClient, @Inject(REST_URL) private url: string) {
        console.log("UserDataSource");
    }

    getUsers(): Observable<User[]> {
        console.log("getUsers");
        let options = {
            headers: new HttpHeaders({
                Authorization: "Basic "   btoa("user:password")
            })
        };

        return this.httpClient.get<User[]>(this.url, options);
    }
}

user.repository.ts:

import { Injectable } from "@angular/core";
import { UserDataSource } from "./user.datasource";
import { User, UserResponse } from "./user.model";

@Injectable()
export class UserRepository {
    private users: User[] = new Array<User>();

    constructor(private dataSource: UserDataSource) {
        console.log("UserRepository");
        this.dataSource.getUsers().subscribe(data => {
            console.log("To slow");
            console.log(data);
            this.users = data;
        });
        this.dataSource.getUsers();
    }

    getUsers(): User[] {
        console.log("To fast");
        console.log(this.users);
        return this.users;
    }
}

user.component.ts:

import { Component, OnInit } from "@angular/core";
import { User } from "../model/user.model";
import { UserRepository } from "../model/user.repository";

@Component({
    selector: 'userTable',
    templateUrl: 'user.component.html'
})
export class UserComponent implements OnInit {
    constructor(private userRepository: UserRepository) {
        console.log("UserComponent");
     }

    users: User[];

    ngOnInit() {
        console.log("ngOnInit");
        this.users = this.userRepository.getUsers();
    }
}

CodePudding user response：

Problem could be that you try to get users from repo before response is coming and subscribe is hit. you can modify that getUsers() return an observable, and used that within template with async pipe. Also if you want to separate concerns, you could user also a subject for that users array in the repository.

users= new BehaviorSubject(initValue);
this.dataSource.getUsers().subscribe(subject);

CodePudding user response：

I removed the user.repository.ts, so the user.component.ts directly calls the user.datasource.ts