Angular 6 / Rx JS Как обновить таблицу, получающую данные через HTTP?

Question

Я создаю таблицу по примеру angular материала , но когда я обновил информацию, данные в таблице не обновляются. Я сделал тест, и все работает с запросом HTTP.
У меня есть код из двух частей:

1. range.component.ts

ngOnInit(): void {
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
    merge(this.sort.sortChange, this.paginator.page)
        .pipe(
            startWith({}),
            switchMap(() => {
                this.isLoadingResults = true;
                return this._ecommerceOrdersService.getData(this.sort.active, this.sort.direction, this.paginator.pageIndex);
            }),
            map(data => {
                // Flip flag to show that loading has finished.
                this.isLoadingResults = false;
                this.isRateLimitReached = false;
                this.resultsLength = data.meta.total;
                return data.data;
            }),
            catchError(() => {
                this.isLoadingResults = false;
                // Catch if the API has reached its rate limit. Return empty data.
                this.isRateLimitReached = true;
                return observableOf([]);
            })
        ).subscribe(data => this.dataSource = data);
}

2. _ecommerceOrdersService:

getData(sort: string, order: string, page: number): Promise<any> {
    const href = this.urlMtk + 'system/ranges';
    const requestUrl = `${href}?page=${page + 1}`;
    return new Promise((resolve, reject) => {
        let resp: any;
        this._httpClient.get(requestUrl)
            .subscribe((response: any) => {
                 this.ranges = response.data;
                 this.dataLength = response.meta.total;
                 this.onOrderChanged.next(this.ranges);
                 this.noData = false;
                 resolve(response);
            }, reject => {
                this.noData = true;
                resolve(reject);
                resp = reject;
                const dataerr = resp;
                this._Auth.showSnackBarUpss(dataerr, 'top');
                this._Auth.deniedPermission(resp.statusText);
            });
    });
}

Я пытаюсь вызвать функцию getData внутри кнопки refre sh , но она не работает.
Это мой первый вопрос здесь, и я надеюсь, что мое описание понятно.
Большое спасибо за любую помощь.

Answer 1

Вы можете использовать другой Subject внутри вашего слияния. Давайте назовем это refresh. Если вы добавите это к своему ranges.component.ts и добавите этот предмет в оператор merge:

_{усеченный код для удобства чтения}

readonly refresh = new Subject<void>();

ngOnInit(): void {
  merge(
    this.sort.sortChange,
    this.paginator.page,
    this.refresh
  )
  // ...
}

Тогда вам просто нужно способ для вашего компонента вызвать этот refre sh. Вы можете сделать это прямо из шаблона или иметь функцию. Я покажу вам прямо из шаблона метода. Он короче и более читабелен, но немного нахмурился:

<button mat-mini-fab (click)="refresh.next()">
  <mat-icon>plus</mat-icon>
</button>

Теперь вы увидите, что сетевой запрос выполняется снова.

_{На заметку о смешивании Promise * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 10 * * * * * * - очень анти-паттерн и значительно снижает читабельность Попробуйте придерживаться Observables и использовать async канал в шаблонах для получения данных. Вы также можете использовать один Observable для создания нескольких объектов, каждый из которых содержит определенную часть данных и повторяет данные при подписке.}