在 Angular 4 中將 PrimeNG 與 Observables (rxjs) 結合使用

Question

我的 angular 4 項目是使用以下服務設置的：

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();

我想使用 PrimeNg 庫，但我看到默認情況下它們設置了如下承諾：

 @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; });
    }
}

那么對我來說，快速實現庫的最佳方式是什么？ 我應該更新我的服務以使用 Promise 嗎？ 或者我應該修改來自 PrimeNg 文檔的代碼？ 那是我第一次與 PrimeNg 合作，所以向我解釋你如何處理它，因為我已經根據 Observables 構建了很多代碼......提前致謝......這是 PrimeNg 文檔的鏈接https://www. primefaces.org/primeng/#/datatable

這是我的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}]},

Answer 1

剛開始使用 PrimeNG 庫並注意到 Promises 的使用。

我已經調整了 tut 以使用 observables 但注意到了錯誤。 這就是我所做的修復。

兩個 http 調用，第二個都返回一個 Observable（不是 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');
}

如果您從這兩種方法輸出，您會注意到問題：

observable 正在輸出一個對象，其中包含一個名為“data”的數據數組。 承諾只是輸出數組。

簡單的解決方法是附加數據對象。 確保將返回對象轉換為 TreeNode[]

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