如何在同一页面不同数据源的Angular Material表格中使用多matSort

你的问题出在两个核心错误：

1. 第二个表格的数据源绑定错误：在obtenerCatalogoSubProducto方法中，你错误地把sortB赋值给了第一个表格的dataSource.sort，而非第二个表格的dataSourceSubProducto.sort。
2. HTML未给表格的matSort指定模板引用变量，导致组件无法正确获取对应的MatSort实例。

以下是修正后的完整代码：

修正后的component.ts #

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { CatService } from '替换为你的CatService实际路径';

@Component({
  selector: 'app-你的组件选择器',
  templateUrl: './你的组件模板.html',
  styleUrls: ['./你的组件样式.css']
})
export class 你的组件类名 implements OnInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild('sortA') sortA!: MatSort;
  @ViewChild('sortB') sortB!: MatSort;

  catProducto: any[] = [];
  catSubProducto: any[] = [];
  dataSource!: MatTableDataSource<any>;
  dataSourceSubProducto!: MatTableDataSource<any>;
  
  displayedColumns = ['idProducto', 'descripcionProducto', 'botonTipoActions'];
  displayedColumnsSubProd = ['idSubProducto', 'descripcionSubProducto'];

  constructor(private catService: CatService) { }

  ngOnInit(): void {
    this.obtenerCatalogoProducto();
    this.obtenerCatalogoSubProducto();
  }

  obtenerCatalogoProducto() {
    this.catService.obtenerCatProd().subscribe((response) => {
      this.catProducto = response.data;
      this.dataSource = new MatTableDataSource(this.catProducto);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sortA;
    });
  }

  private obtenerCatalogoSubProducto() {
    this.catService.obtenerCatSubProd().subscribe((response) => {
      this.catSubProducto = response.data;
      this.dataSourceSubProducto = new MatTableDataSource(this.catSubProducto);
      // 修正：将sortB绑定到第二个表格的数据源
      this.dataSourceSubProducto.sort = this.sortB;
    });
  }

  eliminar(target: any, element: any) {
    // 保留你的删除逻辑
  }
}

修正后的HTML模板 #

<!-- 第一个表格 -->
<form>
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort #sortA="matSort">
    <ng-container matColumnDef="idProducto">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ID.</th>
      <td mat-cell *matCellDef="let element">{{ element.idProducto }}</td>
    </ng-container>

    <ng-container matColumnDef="descripcionProducto">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>PRODUCTO</th>
      <td mat-cell *matCellDef="let element">
        <mat-form-field>
          <input matInput [value]="element.descripcionProducto" />
        </mat-form-field>
      </td>
    </ng-container>
    <ng-container matColumnDef="botonTipoActions">
      <th mat-header-cell *matHeaderCellDef> ACCIONES </th>
      <td mat-cell *matCellDef="let element">
        <button mat-icon-button color="primary">
          <mat-icon>edit</mat-icon>
        </button>
        
        <button mat-icon-button color="warn" (click)="eliminar($event.target,element)">
          <mat-icon>delete</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</form>
<mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons aria-label="Select page of periodic elements">
</mat-paginator>

<!-- 第二个表格 -->
<table mat-table [dataSource]="dataSourceSubProducto" class="mat-elevation-z8" matSort #sortB="matSort">
  <ng-container matColumnDef="idSubProducto">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>ID.</th>
    <td mat-cell *matCellDef="let element">{{ element.idSubProducto }}</td>
  </ng-container>

  <ng-container matColumnDef="descripcionSubProducto">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>SUBPRODUCTO</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field>
        <input matInput [value]="element.descripcionSubProducto" />
      </mat-form-field>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumnsSubProd"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumnsSubProd"></tr>
</table>

关键修正点说明 #

• 给两个表格的matSort分别添加模板引用变量#sortA="matSort"和#sortB="matSort"，确保组件能正确获取各自的MatSort实例。
• 在obtenerCatalogoSubProducto方法中，将sortB赋值给dataSourceSubProducto.sort，绑定到第二个表格的数据源。

内容的提问来源于stack exchange，提问作者Root93