Проблема с картой при попытке преобразовать динамическую таблицу угловых материалов в повторно используемый компонент - PullRequest
0 голосов
/ 04 января 2019

Я пытаюсь преобразовать пример динамической таблицы из Angular Material в повторно используемый компонент, у меня пример работал отлично, если у меня есть служба http в дочернем компоненте, однако я хотел бы сделать его пригодным для использования, я решил иметьВызов http в качестве ввода.

У меня есть родительский компонент, передающий наблюдаемые данные из вызовов http.в дочернем компоненте я пытаюсь вызвать вызов http в Parent, передавая полезную нагрузку в onHttpUpdate.

Проблема в том, что когда я получил функцию switchMap, разбиение на страницы не определено.

export class DynammicTableComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator
  @ViewChild(MatSort) sort: MatSort

  @Input() displayedColumns: string[]

  @Output() onHttpUpdate: EventEmitter<any> = new EventEmitter();

  @Input() responseData: Observable<HttpDbResponse>


  data: Array<any> = []
  resultLimits: Array<number> = [10, 25, 50, 100]
  resultsLength: number = 0
  isLoadingResults: boolean = true

  defaultSort: {} = { sort: 'supplierName', order: 'asc', page: 1, pageSize: 10 }
  constructor() { }

  ngOnInit() {
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 1)


    merge(this.sort.sortChange, this.paginator.page, this.paginator.pageSizeOptions)
      .pipe(
        startWith(this.defaultSort),
        switchMap(() => {
          this.isLoadingResults = true
          this.onHttpUpdate.emit({ sort: this.sort.active, order: this.sort.direction, page: this.paginator.pageIndex + 1, pageSize: this.paginator.pageSize });
          return this.responseData;
        }),
        map(response => {

          return response.data
        }),
        catchError(() => {
          console.log('loading data failed...')
          this.isLoadingResults = false
          return observableOf([])
        })
      ).subscribe(data => this.data = data)

  }

}

Заранее спасибо!

Приветствия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...