MatSort 仅适用于一张桌子

Question

我目前正在使用 Angular 4 并使用 matSort 实现 mat-table。

但是，排序只适用于 1 张桌子，我正试图让它们在我的所有 3 张桌子上工作

app.component.ts：

@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatSort) loginSort: MatSort;
@ViewChild(MatSort) sort2: MatSort;

ngAfterViewInit(){
 this.loginUserDataSource.sort = this.loginSort;
 this.loginUserDataSource.paginator = this.loginPaginator;
 this.weeklyDataSource.paginator = this.paginator;
 this.weeklyDataSource.sort = this.sort;
 this.dailyDataSource.paginator = this.paginator2;
 this.dailyDataSource.sort = this.sort2;
}

<mat-table #table [dataSource]="weeklyRealTimeDataSource" matSort>

      <!-- Name column -->
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}}</mat-cell>
      </ng-container>

      <!-- Monday column -->
      <ng-container matColumnDef="mon">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Mon</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.mon}}</mat-cell>
      </ng-container>

      <!-- Tuesday column -->
      <ng-container matColumnDef="tue">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Tue</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.tue}}</mat-cell>
      </ng-container>

      <!-- Wednesday column -->
      <ng-container matColumnDef="wen">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Wen</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.wen}}</mat-cell>
      </ng-container>

      <!-- Thursday column -->
      <ng-container matColumnDef="thu">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Thu</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.thu}}</mat-cell>
      </ng-container>

      <!-- Friday column -->
      <ng-container matColumnDef="fri">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Fri</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.fri}}</mat-cell>
      </ng-container>

      <!-- Saturday column -->
      <ng-container matColumnDef="sat">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Sat</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sat}}</mat-cell>
      </ng-container>

      <!-- Sunday column -->
      <ng-container matColumnDef="sun">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Sun</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sun}}</mat-cell>
      </ng-container>

      <!-- Total column -->
      <ng-container matColumnDef="total">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Total</mat-header-cell>
        <mat-cell *matCellDef="let element">
          <!--
          <div class="mat-h3" [style.background]="element.total < 30 ? 'yellow': element.total > 45 ? 'yellow' : 'none' ">{{element.total}}</div>
          <button mat-button color="accent">Details</button> -->
          <div *ngIf="element.total < 30">
            <button mat-button color="warn" (click)="openDialog()">{{element.total}}</button>
          </div>
          <div *ngIf="element.total > 45">
            <button mat-button color="warn" (click)="openDialog()">{{element.total}}</button>
          </div>
          <div *ngIf="element.total < 45 && element.total > 30">
            <button mat-button color="primary" (click)="openDialog()">{{element.total}}</button>
          </div>

        </mat-cell>
      </ng-container>

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

    </mat-table>



    <!-- STATIC DATA FOR WEEK VIEW -->


    <mat-table #table [dataSource]="weeklyDataSource" matSort>

      <!-- Name column -->
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}}</mat-cell>
      </ng-container>

      <!-- Monday column -->
      <ng-container matColumnDef="mon">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Mon</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.mon}}</mat-cell>
      </ng-container>

      <!-- Tuesday column -->
      <ng-container matColumnDef="tue">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Tue</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.tue}}</mat-cell>
      </ng-container>

      <!-- Wednesday column -->
      <ng-container matColumnDef="wen">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Wen</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.wen}}</mat-cell>
      </ng-container>

      <!-- Thursday column -->
      <ng-container matColumnDef="thu">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Thu</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.thu}}</mat-cell>
      </ng-container>

      <!-- Friday column -->
      <ng-container matColumnDef="fri">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Fri</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.fri}}</mat-cell>
      </ng-container>

      <!-- Saturday column -->
      <ng-container matColumnDef="sat">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Sat</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sat}}</mat-cell>
      </ng-container>

      <!-- Sunday column -->
      <ng-container matColumnDef="sun">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Sun</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sun}}</mat-cell>
      </ng-container>

      <!-- Total column -->
      <ng-container matColumnDef="total">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Total</mat-header-cell>
        <mat-cell *matCellDef="let element">
          <!--
          <div class="mat-h3" [style.background]="element.total < 30 ? 'yellow': element.total > 45 ? 'yellow' : 'none' ">{{element.total}}</div>
          <button mat-button color="accent">Details</button> -->
          <div *ngIf="element.total < 30">
            <button mat-button color="warn" (click)="openDialog()">{{element.total}}</button>
          </div>
          <div *ngIf="element.total > 45">
            <button mat-button color="warn" (click)="openDialog()">{{element.total}}</button>
          </div>
          <div *ngIf="element.total < 45 && element.total > 30">
            <button mat-button color="primary" (click)="openDialog()">{{element.total}}</button>
          </div>

        </mat-cell>
      </ng-container>

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

    </mat-table>

如果我删除第一个表，则排序在第二个表上起作用。否则只有第一个表是可排序的。

Answer 1

您的选择器引用指令类型MatSort，它首先找到的类型为MatSort。

将您的 #table 更改为 f.e. #table1="matSort", #table2="matSort", #table3="matSort".

然后您可以通过选择器访问您的表格

@ViewChild('table1') sort1: MatSort;

另一种方法是将#table 更改为#table1、#table2、#table3 或任何您喜欢并使用的名称：

@ViewChild('table1', { read: MatSort }) sort1: MatSort;

---

https://angular.io/api/core/Directive

exportAs - 在模板中导出组件实例的名称。可以给出单个名称或以逗号分隔的名称列表。

https://material.angular.io/components/sort/api#MatSort

MatSortables 的容器，用于管理排序状态并提供默认排序参数。

选择器：[matSort]

导出为：matSort