Использование нескольких сервисов для заполнения угловой таблицы данных - PullRequest
Новая
       8

Использование нескольких сервисов для заполнения угловой таблицы данных

0 голосов
/ 04 марта 2019

Я использую несколько базовых сервисов для заполнения трех столбцов таблицей данных 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 голосов
/ 04 марта 2019

Похоже, вам нужен ответ от обеих служб одновременно;если это так, то 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-вызовом в один наблюдаемый массив и, наконец, возвращает этот наблюдаемый массив.
0 голосов
/ 04 марта 2019

Вы можете использовать оператор 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

        });
}
0 голосов
/ 04 марта 2019

Одно из решений состоит в том, чтобы использовать оператор RxJs integraLatest для объединения ответов всех служб: 

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

Редактировать: После дальнейших размышлений я предлагаю, чтобы в этом случае использования, где должен завершаться каждый HTTP-запрос, вы использовали forkJoin в ответе Тушара Уолзаде. Этот SO-ответ дает краткое объяснение различия между forkJoin и combineLatest.

...