Using PrimeNG with Observables (rxjs) in Angular 4

Question

My angular 4 project is setup with a service as following:

const usersURL = 'http://my.super.url.php';


@Injectable()
export class UserService {



  users: Observable<User[]>

    constructor (public http:Http)

 let tick$ = Observable.timer(100, 60000);


          this.users = tick$.flatMap(() => http.get(usersURL)).map(res => [res.json()]).publishBehavior(<User[]>[]).refCount();

And I would like to use the PrimeNg library but I see by default they are setup with promises like so:

 @Injectable()
export class CarService {

    constructor(private http: Http) {}

    getCarsSmall() {
        return this.http.get('/showcase/resources/data/cars-small.json')
                    .toPromise()
                    .then(res => <Car[]> res.json().data)
                    .then(data => { return data; });
    }
}

So what's the best way for me to implement the library quickly? Should I update my service to use promises? Or should I adapt the code comming from the PrimeNg doc? That's first time I work with PrimeNg so explain to me how do you deal with it according that I have a lot of code already build depending on Observables..thanks in advance..here's the link to the PrimeNg doc https://www.primefaces.org/primeng/#/datatable

Here is my json:

 {"status":"OK","data":{"apps":{"weather_icon":"storm","running":    {"current":6,"total":12,"sensitive":{"current":1,"total":6},"non_sensitive":{"current":5,"total":6}},"non_running":{"current":6,"sensitive":{"current":5,"unseen":2,"acknowledged":0,"assigned":3},"non_sensitive":{"current":1,"unseen":0,"acknowledged":0,"assigned":1}},"availability": {"current":8,"trend":-6.6},"details":[{"id":1,"label":"Gestion administrative des patients (ORBISAdm)","state":"Critique","state_id":2,"weather_icon":"storm","since":"2h37mn","availability":{"current":68,"trend":"-"},"acknowledged":1,"assigned":1,"assignee":{"id":1,"name":"Thomas Z."}},{"id":2,"label":"Cha\u00eene de messagerie (mail)","state":"Correct","state_id":0,"weather_icon":"sun","since":">6j5h","availability":{"current":100,"trend":"="},"acknowledged":0,"assigned":0},{"id":3,"label":"CRM (CRM)","state":"Correct","state_id":0,"weather_icon":"sun","since":">35j","availability":{"current":100,"trend":"="},"acknowledged":0,"assigned":0}]},

Since you don't pass an Observable or a Promise to PrimeNG, but actual data, in my opinion there is no difference. Observables however offer the built-in advantage or convenience of the async pipe. — alex kucksdorf
@alexkucksdorf ahright Thanks to you..so I just have to replace [value] by [users] in the following evemple then it will work the same? <h3>Dynamic Columns</h3> <p-dataTable [value]="cars"> <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column> </p-dataTable> — Emile Cantero
No, you need to replace [value]="cars" with [value]="users | async", then it should work. However, you also need to make sure that your column fields and headers match your data. — alex kucksdorf
@alexkucksdorf when I didi it : <h3>Dynamic Columns</h3> <p-dataTable [value]="users | async"> <p-column *ngFor="let user of userService.users" [field]="user.data.apps.details[0].label"></p-column> </p-dataTable> I've got an error: ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. could you help? — Emile Cantero
On a quick glance the JSON you return from your service is a plain object and not as an array, as it is expected. You need to return an array. — alex kucksdorf

Darren Street Darren Street · Accepted Answer · 2020-11-24T10:23:26

Just started using the PrimeNG library and noticed the use of Promises.

I've adapted the tut to use observables but noticed the error. This is what I did to fix.

Both http calls, the second returning an Observable of any (not TreeNode[])

getFiles()  {
  return this.http.get<any>('assets/files.json')
  .toPromise()
  .then(res => res.data as TreeNode[]);
}

getFiles2(): Observable<any> {
  return this.http.get<any>('assets/files.json');
}

if you output from both methods you notice the problem:

The observable is outputting an object with am array of your data called "data". The promise is just outputting the array.

The easy fix is to append the data object. Ensure you cast the return object to TreeNode[]

 this.dataSvc.getFiles2().subscribe({
    next: files => {
      this.files2 = files.data as TreeNode[];
    }
  });

Using PrimeNG with Observables (rxjs) in Angular 4

1 Answers