如何解决对角度材料表中的可观察数据进行排序
我正在尝试对 Angular Material Table 中的可观察数据进行排序。我能够成功地将数据加载到表中,但我无法对其进行排序。请看下面的代码:
export class IntegratedComponent implements AfterViewInit {
displayedColumns: string[] = ['actions','id','date','fullName'];
data: Observable<Data[]>;
private url;
corpId: string; // used in input field
constructor(private integrationService: IntegrationService) {}
@ViewChild(MatSort) sort: MatSort; // allows user to sort items in material table
ngAfterViewInit() {}
search(term: string) {
this.integratedData = merge(this.sort.sortChange)
.pipe(
startWith({}),switchMap(() => {
return this.integratedService!.getIdData(term);
}),map(obj => {
return obj;
}),catchError(() => {
return observableOf([]);
})
)
}
这是模板:
<mat-form-field>
<mat-label>Search for ID</mat-label>
<input matInput #searchBox maxLength="7" [(ngModel)]="id" required>
<mat-hint align="start">{{searchBox.value.length}} / 8</mat-hint>
<mat-icon title="Search" class="search-icon" matSuffix (click)="search(id)">search</mat-icon>
</mat-form-field>
<table mat-table [dataSource]="data" class="mat-elevation-z8" matSort>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
<td mat-cell *matCellDef="let element">{{element.actions}}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let element">{{element.id}}</td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef> Date </th>
<td mat-cell *matCellDef="let element">{{element.date | date}}</td>
</ng-container>
<ng-container matColumnDef="fullName">
<th mat-header-cell *matHeaderCellDef> Full Name </th>
<td mat-cell *matCellDef="let element">{{element.fullName}}</td>
</ng-container>
</table>
模板中显示的按钮 - 它们不起作用。我该如何解决这个问题?
解决方法
我在 YT 视频的帮助下弄清楚了。请参阅下面的答案:
export class IntegratedComponent implements AfterViewInit {
displayedColumns: string[] = ['actions','id','date','fullName'];
dataSource = new MatTableDataSource([]);
private url;
corpId: string; // used in input field
constructor(private integrationService: IntegrationService) {}
@ViewChild(MatSort) sort: MatSort; // allows user to sort items in material table
ngAfterViewInit() {}
search(term: string) {
this.integratedService.getIdData(term).subscribe(next => {
if(!results) {
return;
}
this.dataSource = new MatTableDataSource(results);
this.dataSource.sort = this.sort;
})
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。