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

MatSort仅适用于一个表

1 个答案: