Question

我正在尝试将动态表示例从Angular Material转换为可重用的组件，如果子组件中具有http服务，则该示例可以正常工作，但是我想使其可用，因此我决定http呼叫作为输入。

我让父组件传递来自http调用的可观察数据。在子组件中，我试图通过在onHttpUpdate中发出有效负载来调用父项中的http调用。

问题是当我获得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)

  }

}

谢谢！

欢呼

尝试将Angular Material Dynamic Table转换为可重用组件时切换贴图问题

0 个答案: