在 Angular 4 中将 PrimeNG 与 Observables (rxjs) 结合使用 [英] Using PrimeNG with Observables (rxjs) in Angular 4

问题描述

我的 angular 4 项目设置如下服务:

const usersURL = 'http://my.super.url.php';@Injectable()导出类 UserService {用户:可观察的<用户[]>构造函数(公共 http:Http)让tick$ = Observable.timer(100, 60000);this.users = tick$.flatMap(() => http.get(usersURL)).map(res => [res.json()]).publishBehavior([]).refCount();

我想使用 PrimeNg 库，但我看到默认情况下它们是用如下承诺设置的:

 @Injectable()导出类 CarService {构造函数(私有 http: Http){}getCarsSmall() {return this.http.get('/showcase/resources/data/cars-small.json').承诺().then(res => <Car[]> res.json().data).then(data => { return data; });}}

那么对我来说，快速实现库的最佳方式是什么?我应该更新我的服务以使用 Promise 吗?或者我应该修改来自 PrimeNg 文档的代码?那是我第一次与 PrimeNg 合作，所以向我解释你如何处理它，因为我已经根据 Observables 构建了很多代码......提前致谢......这是 PrimeNg 文档的链接

observable 正在输出一个对象，其中包含名为data"的数据数组.承诺只是输出数组.

简单的解决方法是附加数据对象.确保将返回对象强制转换为 TreeNode[]

 this.dataSvc.getFiles2().subscribe({下一个:文件 =>{this.files2 = files.data as TreeNode[];}});

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}]},

解决方案

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[];
    }
  });

这篇关于在 Angular 4 中将 PrimeNG 与 Observables (rxjs) 结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！