我有一个Angular材质表。 HTML如下：
<act-toolbar [leftColor]="'blue'" [rightColor]="'blue'"></act-toolbar>
<mat-spinner *ngIf="!dataSource" style="margin:218px 45%"></mat-spinner>
<div fxLayout="column" *ngIf="dataSource">
<div class="example-filter-box" fxLayout="column">
<h4 class="act-section-header">COMMITTEE SELECTION</h4>
<form class="example-form">
<mat-form-field class="example-full-width" shouldPlaceholderFloat="false">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Please enter CAMS Check Name or CAMS ID number.">
<!-- <input placeholder="Please enter CAMS Check Name or CAMS ID number." matInput #input (keyup)='searchElements(input.value)'> -->
</mat-form-field>
</form>
</div>
<div style="width:60%;margin: 0 auto; padding-bottom: 20px;" fxFlexAlign="center" fxFlexOffset="20px">
<div fxFlex fxLayout="row" fxLayoutAlign="end">
<!-- Added by Arka for ShowSubmitted Button -->
<div *ngIf="showSubmitted">
<!-- Added by Arka for ShowSubmitted Button ends-->
<button mat-button class="act-button outline-blue-text " [ngClass]="{'fill': showSubmitted == true}" (click)="toggleSubmitted()">Show Submitted</button>
</div>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<mat-table #table [dataSource]="dataSource" matSort fxFlex="60" class="">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> CAMS Check Name </mat-header-cell>
<mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="cdate">
<mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Creation Date </mat-header-cell>
<mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.cdate | date:'mediumDate'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="createdby">
<mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Created By </mat-header-cell>
<mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.createdby}} </mat-cell>
</ng-container>
<ng-container matColumnDef="camsid">
<mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> CAMS ID </mat-header-cell>
<mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.camsid}} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Status </mat-header-cell>
<mat-cell actQuestionFunction style="padding-left:10px" [config]="{ lob : { camsId: element.camsid ,'true': 'func1', 'false':' func2'} }" *matCellDef="let element"> {{element.sqldbinfo.status}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row [routerLink]="['/overview', row.camsid]" (click)="setCurrentCams(row)" [queryParams]="{ name: row.name, camsId: row.camsid }" [ngClass]="{'hidden': (row.status == 'Submitted' && showSubmitted == false), 'submitted': row.status == 'Submitted'}" *matRowDef="let row; columns: displayedColumns "></mat-row>
</mat-table>
</div>
<div style="padding-top: 20px;"></div>
</div>
我正在创建一个表并希望对其进行排序，但不幸的是数据正在呈现，但排序没有发生。
import { Component, ViewChild, OnInit } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { CamsService } from '../services/cams.service';
import { ActauthService } from '../actauth.service';
import { LocalDataService } from '../services/local-data.service';
import { ActService } from '../services/act.service';
import { ActModalService } from '../act-modal/act-modal-service.service';
@Component({
selector: 'app-camslist',
templateUrl: './camslist.component.html',
styleUrls: ['./camslist.component.less']
})
export class CamslistComponent implements OnInit {
displayedColumns = ['name', 'cdate', 'createdby', 'camsid', 'status'];
dataSource;
StatusText: Array<string>;
SubmittedButtonShowHide: Boolean;
constructor(
private camsService: CamsService,
private auth: ActauthService,
private localDataService: LocalDataService,
private actService: ActService,
private modalService: ActModalService) {
}
@ViewChild(MatSort) sort: MatSort;
showSubmitted: boolean = false;
ngOnInit() {
this.auth.getMyLogon().subscribe(
res => {
res.EmployeeId = 29007154;
this.camsService.all(res).subscribe(
cams => {
if (cams.length == 0) {
this.modalService.openNoCamsIdMsgModal();
} else {
this.dataSource = new MatTableDataSource(cams);
this.dataSource.sort = this.sort;
};
})
})
}
// ngAfterViewInit() {
// }
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue;
}
toggleSubmitted() {
this.showSubmitted = !this.showSubmitted;
}
CheckStatus() {
const array = this.dataSource.data;
// tslint:disable-next-line:forin
for (const st in array) {
this.StatusText = array[st].sqldbinfo.status;
if (!(this.StatusText.includes('Submitted', 0))) {
return this.SubmittedButtonShowHide = true;
} else {
return this.SubmittedButtonShowHide = false;
}
}
}
setCurrentCams(selcams) {
//Test data
selcams.camsid = 66502;
this.actService.tabs.cams = selcams;
this.localDataService.setLocalStorage("selcams", selcams);
}
}
export interface Element {
name: string;
cdate: string;
createdby: string;
camsid: number;
status: string;
}
这是稳定版本，数据正在呈现，但排序没有发生。每当我使用 OnInit 在顶级课程中添加 AfterViewInit 时，总是会给我一个错误。请帮帮我。
答案 0 :(得分：1)
你的代码应该是这个
dataSource;
您的数据源声明如下：
this.auth.getMyLogon().subscribe(
res => {
res.EmployeeId = 29007154;
this.camsService.all(res).subscribe(
cams => {
if (cams.length == 0) {
this.modalService.openNoCamsIdMsgModal();
} else {
this.dataSource = new MatTableDataSource(cams);
this.dataSource.sort = this.sort;
};
})
})
您使用HTTP调用来填充它：
ngAfterViewInit错误
无法设置属性＆＃39;排序＆＃39;在callProviderLifecycles（core.js：12706）的CamslistComponent.ngAfterViewInit（camslist.component.ts：48）中未定义的
来自您的ioctl在 HTTP呼叫结束之前运行这一事实。所以你的数据源没有实现，因此错误。