在 Angular Material Table 中对可观察数据进行排序
Sorting Observable Data in an Angular Material Table
我正在尝试对 Angular Material Table 中的可观察数据进行排序。我能够成功地将数据加载到 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>
按钮显示在模板中 - 它们只是不起作用。我该如何解决这个问题?
我在 YouTube 视频的帮助下弄明白了。请参阅下面的答案:
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;
})
}
}
我正在尝试对 Angular Material Table 中的可观察数据进行排序。我能够成功地将数据加载到 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>
按钮显示在模板中 - 它们只是不起作用。我该如何解决这个问题?
我在 YouTube 视频的帮助下弄明白了。请参阅下面的答案:
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;
})
}
}