Ios MatSort仅适用于一张桌子

我目前正在使用Angular 4并使用matSort实现mat表

然而，排序只在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>

@ViewChild（MatSort）排序：MatSort；
@ViewChild（MatSort）登录器：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；
}
名称
{{element.name}
周一
{{element.mon}
星期二
{{element.tue}
温
{{element.wen}}
清华大学
{{element.thu}}
星期五
{{element.fri}
坐
{{element.sat}}
太阳
{{element.sun}
全部的
{{element.total}
{{element.total}
{{element.total}
名称
{{element.name}
周一
{{element.mon}
星期二
{{element.tue}
温
{{element.wen}}
清华大学
{{element.thu}}
星期五
{{element.fri}
坐
{{element.sat}}
太阳
{{element.sun}
全部的
{{element.total}
{{element.total}
{{element.total}

---

如果删除第一个表，排序将在第二个表上进行。否则，只有第一个表是可排序的。

您的选择器引用指令类型

MatSort

，它采用第一个找到的

MatSort

类型

将您的

#表格

更改为f.e.

#table1=“matSort”

，

#table2=“matSort”

，

#table3=“matSort”

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

@ViewChild（'table1'）sort1:MatSort

另一种方法是将
#table
更改为
#table 1
、
#table 2
、
#table 3
或任何您想要使用的名称：

@ViewChild（'table1'，{read:MatSort}）sort1:MatSort



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


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

选择器：[matSort]

出口为：matSort

您的选择器引用指令类型
MatSort
，它采用第一个找到的
MatSort
类型

将您的
#表格
更改为f.e.
#table1=“matSort”
，
#table2=“matSort”
，
#table3=“matSort”

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

@ViewChild（'table1'）sort1:MatSort

另一种方法是将
#table
更改为
#table 1
、
#table 2
、
#table 3
或任何您想要使用的名称：

@ViewChild（'table1'，{read:MatSort}）sort1:MatSort



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


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

选择器：[matSort]

出口为：matSort