angular - 使用多个服务来填充 Angular 数据表

Question

我正在使用一些后端服务来使用 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****/*****');
    }
}

Answer 1

It seems that you need the response from both the services at once; if it is the case, RxJS ForkJoin is your friend! You can use forkJoin as follows -

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

• 仅供引用，forkJoin 等待每个 http 请求完成，并将每个 http 调用返回的所有可观察值分组到单个可观察值数组中，最后返回该可观察值数组。