ios - 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 - name under which the component instance is exported in a template. Can be given a single name or a comma-delimited list of names.

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

Container for MatSortables to manage the sort state and provide default sort parameters.

Selector: [matSort]

Exported as: matSort