使用多种服务填充Angular数据表

时间:2019-03-04 13:17:43

标签: angular http datatable angular-material observable

我正在使用一些后端服务,用Material Designs数据表填充三个列。我正在使用可观察的数据来填充数据源数据。但是如何包含其他服务的数据。到目前为止,我只能使用一项服务中的数据。我的想法是对数据源使用.push。

dataSource = []

constructor(public data: xService, public otherData: yService) { }

submit() {
    this.data.getUsers().subscribe(data => {
        this.dataSource = data.rows;
    });

    this.otherData.getUnitAssignments().subscribe(otherData => {
        this.dataSource.push({ assignments: otherData });
    });
}

服务文件

export interface xresponse {
  rows: Array < string > ,
}
constructor(private http: HttpClient) {}

getUsers(): Observable<xResponse> {
  return this.http.get<xResponse>('/services/****/user/j**/******');
}

其他服务

export interface yResponse {
    rows: Array<string> ,
}

@Injectable({
    providedIn: 'root'
})
export class yService {

    constructor(private http: HttpClient) {}

    getyInfo(): Observable<yResponse> {
        return this.http.get<yResponse>('/services/c***/user/j****/*****');
    }
}

3 个答案:

答案 0 :(得分:2)

  

似乎您需要同时获得这两个服务的响应;如果是这样,   RxJS ForkJoin 是您的朋友!您可以按以下方式使用forkJoin-

import { forkJoin } from 'rxjs';

submit() {
    const combined = forkJoin([
        this.data.getUsers(),
        this.otherData.getUnitAssignments()
    ]);
    combined.subscribe((response) => {
        // you will get 2 arrays in response
        this.dataSource.push(response[0].rows);
        this.dataSource.push(response[1].rows);
    });
}
  • FYI forkJoin等待每个http请求完成,并将每个http调用返回的所有可观察值分组到单个可观察数组中,最后返回该可观察数组。 / em>

答案 1 :(得分:1)

一种解决方案是使用RxJs combineLatest运算符组合来自所有服务的响应:

submit() {
  combineLatest(
    this.service1.getData(),
    this.service2.getData(),
    this.service3.getData()
  ).subscribe(allData => ...)
}

编辑:经过进一步思考,我建议对于此用例(每个HTTP请求都应完成),请使用Tushar Walzade回答的forkJoinThis SO answer简要说明了forkJoincombineLatest之间的区别。

答案 2 :(得分:1)

您可以使用RxJs forkJoin运算符。这样,您只有在收到所有回复后才构造dataSource(正如官方文档中所说的那样,其工作方式与Promise.all类似):

ngOnInit(): void {
    forkJoin([this.data.getUsers(), this.otherData.getUnitAssignments()])
        .subscribe(result => {
            this.firstRequestResult = result[0];
            this.secondRequestResult = result[1];
            //building your dataSource here

        });
}