Question

我的角度应用程序中有一个可正确显示和呈现的mattable，但是排序不起作用。当我单击但没有任何反应时，播放标题动画。我正在使用augory进行调试，并且可以看到正在设置排序递增和递减属性。有一个名为_arrowDescending的属性，可以将其设置为asc或des进行排序，这是正确的。除了具有排序功能之外，其他所有内容都看起来不错。这是我的文件：

app-module.ts：

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule }   from '@angular/forms';
import {MatButtonModule, MatCheckboxModule, MatTableModule, MatSortModule,} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MatTableModule,
    MatSortModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatSort, MatTableDataSource} from '@angular/material';

export interface WorkspaceCase {
  caseNumber: string;
  subject: string;
  typeology: string;
  caseType: string;
  disposition: string;
  daysOpen: number;
  sarDays: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  selectedStatus:string;
  displayedColumns: string[] = ['caseNumber', 'subject', 'typeology', 'caseType', `disposition`, `daysOpen`, `sarDays`];
  assignedCases : WorkspaceCase[] = [{caseNumber: "123", subject: "test", typeology: "test", caseType: "test", disposition: "test", daysOpen: 2, sarDays: 4},
  {caseNumber: "12s3", subject: "tesst", typeology: "stest", caseType: "tesst", disposition: "tesst", daysOpen: 22, sarDays: 24}];
  dataSource;
  //filteredCases = [];

  @ViewChild(MatSort) sort: MatSort;
  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.assignedCases);

  }

  onFilterChange(newValue) {
    this.selectedStatus = newValue;
    this.applyFilter(this.selectedStatus);
    alert(this.selectedStatus );
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

app-component.html

<!-- MY WORKSPACE-->
<div class="row align-items-center ods-margin__top--large">
        <div class="col-md-10">
           <h2 class="ods-text__body--medium "><span class="opticon opticon-home ods-margin__right--tiny"></span>My Workspace</h2>
        </div>
        <div class="col-md-2">
           <div class="ods-form-field select__group ">
              <div class="ods-select__wrapper">
                 <select [ngModel]="selectedStatus" (ngModelChange)="onFilterChange($event)" class="ods-select__input" id="">
                 <option>Filter By Status</option>
                 <option>Status 1</option>
                 <option>Status 2</option>
                 <option>Status 3</option>
                 <option>Status 4</option>
                 </select>
              </div>
           </div>
        </div>
     </div>
     <div class="row">
        <div class="col-md-12">
           <div id="my_workspace" class="table-area">
              <mat-table [dataSource]= "assignedCases" matSort class="mat-elevation-z8">
                 <ng-container matColumnDef="caseNumber">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Case Number </mat-header-cell>
                    <mat-cell *matCellDef="let case"> {{case.caseNumber}} </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="subject">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Subject </mat-header-cell>
                    <mat-cell mat-cell *matCellDef="let case"> {{case.subject}} </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="typeology">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Typeology </th>
                    <td mat-cell *matCellDef="let case"> {{case.typeology}} </td>
                 </ng-container>
                 <ng-container matColumnDef="caseType">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Case Type </th>
                    <td mat-cell *matCellDef="let case"> {{case.caseType}} </td>
                 </ng-container>
                 <ng-container matColumnDef="disposition">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Disposition </th>
                    <td mat-cell *matCellDef="let case"> {{case.disposition}} </td>
                 </ng-container>
                 <ng-container matColumnDef="daysOpen">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Days Open </th>
                    <td mat-cell *matCellDef="let case"> {{case.daysOpen}} </td>
                 </ng-container>
                 <ng-container matColumnDef="sarDays">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Days To File Sar </th>
                    <td mat-cell *matCellDef="let case"> {{case.sarDays}} </td>
                 </ng-container>
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
              </mat-table>
              <div class="ods-margin--tiny">
                 <a id="table_expand"><span class="opticon opticon-arrowdown"></span></a>
              </div>
           </div>
        </div>
     </div>
     <!-- MY WORKSPACE (END)-->

app.component.css

    @import "../../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

body { 
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

.basic-container {
  padding: 30px;
}

.version-info {
  font-size: 8pt;
  float: right;
}

Answer 1

代替

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

尝试在构造函数或ngOnInit中定义排序。

ngOnInit(){
        this.dataSource.sort = this.sort;
}

Answer 2

您正确地初始化了数据源，但实际上并未在 HTML 模板中使用它。

  <mat-table [dataSource]= "assignedCases" matSort class="mat-elevation-z8">

应该

  <mat-table [dataSource]= "dataSource" matSort class="mat-elevation-z8">

角材料表排序不起作用

2 个答案: