[英]Angular Material Table sort not working
我在我的 angular 應用程序中有一個可正確顯示和呈現的 mattable,但排序不起作用。 單擊時會播放標題動畫,但沒有任何反應。 我正在使用 augury 進行調試,我可以看到正在設置排序升序和降序屬性。 有一個名為 _arrowDescending 的屬性,它被設置為 asc 或 des 以進行排序,這是正確的。除了排序能力之外,一切看起來都很好。 這是我的文件:
應用模塊.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();
}
}
應用組件.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)-->
應用組件.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;
}
代替
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
嘗試在構造函數或 ngOnInit 中定義排序。
ngOnInit(){
this.dataSource.sort = this.sort;
}
您正在正確初始化數據源,但實際上並未在 HTML 模板中使用它。
<mat-table [dataSource]= "assignedCases" matSort class="mat-elevation-z8">
應該
<mat-table [dataSource]= "dataSource" matSort class="mat-elevation-z8">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.