Question

我正在尝试使用角度6的角度材料数据表，但没有显示排序标题。我没有任何错误，也没有任何显示。

<mat-card>
<mat-card-content>
  <div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource" matSort>

      <!-- Position Column -->
      <ng-container matColumnDef="StartDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Datum </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.StartDate}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="StartTime">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Uhrzeit </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.StartTime}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="customer.CustomerShort">
        <mat-header-cell *matHeaderCellDef> Kunde </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.customer.CustomerShort}} </mat-cell>
      </ng-container>

test-drive-list-component.html

我已经导入了MatSort模块并链接了MatSort。

export class TestDriveListComponent implements OnInit {
  displayedColumns = ['StartDate', 'StartTime', 'customer.CustomerShort', 
  'user.UserShort',
  'automobile.AutomobileShort', 'automobile.licenseNumber', 'status', 
  'actions'];

  testdrives: TestDrive[];

  dataSource: TestdriveDataSource | null;

  query = '';


  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private dataService: DataService, public dialog: MatDialog) { }

  ngOnInit() {
    this.dataSource = new TestdriveDataSource(this.dataService, this.sort);
  }

  applyFilter() {
    this.dataSource.filter = this.query;
  }

我对棱角分形的经验不是很丰富，任何帮助将不胜感激。

Answer 1

Dear @Florian Glaesser,    
Please try below steps once:
    1. try to  import MatSortModule in your app.module.ts
    2. Next we need to define matsort local variable as below:

          @ViewChild(MatSort) matSort: MatSort;
          private sort: any;
          @ViewChild(MatSort) set content(content: ElementRef) {
        this.sort = content;
        if (this.sort) {
          this.dataSource.sort = this.sort;
        }
    3. once you got your data in the ngOnit, bind the matSort as below:
     ngOnInit() {
        this.dataSource = new MatTableDataSource(<your service which returns the data>);
        this.dataSource.sort = this.matSort;
      }
This worked for me. Please try it once.

垫排序标题不显示

1 个答案: