Angular 8: использовать распознаватель при вызове службы для разбиения на страницы на стороне сервера - PullRequest
Новая
       18

Angular 8: использовать распознаватель при вызове службы для разбиения на страницы на стороне сервера

0 голосов
/ 25 марта 2020

Я работаю, используя angular материал. В то время как я выбираю данные в таблице данных, используя разбиение на страницы на стороне сервера, источник данных, который имеет тип MatTableDataSource, может извлекать данные из службы. Но он не показывает никаких данных в представлении DOM. Я искал в net и нашел такие ответы, как, когда DOM отображается перед получением данных, происходит такой случай. В этом случае использование решателя является способом преодоления этой проблемы.

Итак, я впервые использую распознаватель, и он не работает.

Следующее - это мой класс резолвера.

table.resolver.ts 

import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {TableService} from '@app/features/admin/pages/table/table.service';

@Injectable()
export class TableResolver implements Resolve<any> {

  constructor(private tableService: TableService) {

  }
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    return this.tableService.getValues(
      route.queryParamMap.get('pageSize'),
      route.queryParamMap.get('pageIndex'),
      route.queryParamMap.get('param3'));
  }

это мой сервис: table.service .ts 

import { Injectable } from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TableService {
  query = `front/table-search`;

  constructor(
    private http: HttpClient
  ) { }

  getValues(pageSize: any, pageIndex: any, param3: any ): Observable<any> {
    const params = new HttpParams({
      fromObject: {
        perPage: pageSize,
        page: pageIndex,
        param3,
      }
    });
    return this.http.get<any>(`${this.query}`, {params});
  }

}

Это раздел моего компонента, откуда вызывается служба: table.component.ts 

ngAfterViewInit() {
    fromEvent(this.input.nativeElement, 'keyup').pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      tap(() => {
        this.pageIndex = 1;
        this.getValues();
      })
    ).subscribe();

    this.paginator.paginate.subscribe(paginator => {
      this.pageIndex = paginator.page;
      this.pageOffset = paginator.pageOffset;
      this.getValues();
    });
  }
  
  getValues(): void {
    this.tableService.getValues(
      this.pageOffset,
      this.pageIndex,
      this.param3,
    ).subscribe(res => {
      this.isLoading = true;
      this.values = res.data;
      this.total = 0;
      
      this.dataSource = new MatTableDataSource<any>(this.values);
     
      this.dataSource.sort = this.sort;
      this.total = res.meta.total;
       this.isLoading = false;
    });
  }

Даже если данные Правильно выбирается при нажатии кнопки «Предыдущая» для разбивки на страницы, но в таблице по-прежнему отсутствуют данные.

Любая помощь?

...