如何在一个组件中对多个mat-table进行排序?

时间:2019-10-21 16:35:00

标签: angular sorting angular-material mat-table

我需要在一个组件中对2个表进行排序。到目前为止,没有结果以及控制台错误。

TS:

  displayedColumnsAgregados = ['referencia', 'descripcion', 'action']
  dataSourceAgregados = new MatTableDataSource

  displayedColumnsDisponibles = ['referencia', 'inv', 'action']
  dataSourceDisponibles = new MatTableDataSource

  @ViewChild('sortAgregados', {static: false}) sortAgregados: MatSort;
  @ViewChild('sortDisponibles', {static: false}) sortDisponibles: MatSort;

  ngOnInit() {
    this.initForm()
    this.initData()
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.dataSourceDisponibles.sort = this.sortDisponibles
      this.dataSourceAgregados.sort = this.sortAgregados
    }, 200)
  }

  initData() {
    this.daoUser.getSellers().subscribe( (res:any) => this.userList = res.data)
    this.daoUser.getMechanics().subscribe( (res:any) => this.mechList = res.data)
    this.dao.getAll(this.ITEM_URL).subscribe( res => {
      this.dataSourceDisponibles = res
      this.isLoaded = true
    })
  }

HTML:

        <mat-table [dataSource]="dataSourceAgregados"  #sortAgregados="matSort" matSort matSortDirection="desc" style="background-color: transparent; max-height: 370px;">

          <ng-container matColumnDef="referencia">
            <mat-header-cell *matHeaderCellDef fxFlex="15%" style="justify-content: flex-start" mat-sort-header>Ref.</mat-header-cell>
            <mat-cell *matCellDef="let el" fxFlex="15%" style="justify-content: flex-start">
              {{el.referencia}}
            </mat-cell>
          </ng-container>
..



        <mat-table [dataSource]="dataSourceDisponibles" #sortDisponibles="matSort" matSort matSortDirection="desc" style="background-color: transparent; max-height: 370px;">


          <ng-container matColumnDef="referencia">
            <mat-header-cell *matHeaderCellDef style="justify-content: flex-start" mat-sort-header>Ref.</mat-header-cell>
            <mat-cell *matCellDef="let el" style="justify-content: flex-start">{{el.referencia}}</mat-cell>
          </ng-container>
..

请问有人可以帮助我解决这些意外,奇妙,有趣,沙皮球,诱人和复杂的问题吗?

0 个答案:

没有答案