![](/img/trans.png)
[英]How can i get the data from localstorage and view in table using javascript and make a dropdown to sort the table
[英]How can I make sort table work with Angular 8 + data from firebase?
我有一个带有来自 firebase 数据的材料表的 angular PWA,显示了数据并且分页器正在工作,但我也想对其数据进行排序,但 mat-sort 不起作用。 它显示了对数据进行排序的箭头,但单击箭头时,数据未排序。
我遵循了 Angular Material 的文档。
组件模板中的表格:
<ng-container matColumnDef="movimento">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Tipo de movimento</th>
<td mat-cell *matCellDef="let movimento"> {{movimento.mapValue.fields.tipo_movimento.stringValue}}
</td>
</ng-container>
<ng-container matColumnDef="valor">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Valor</th>
<td mat-cell *matCellDef="let movimento">
{{movimento.mapValue.fields.valor.doubleValue | number:'1.1-2'}}
{{movimento.mapValue.fields.valor.integerValue}} €
</td>
</ng-container>
<ng-container matColumnDef="data">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Data</th>
<td mat-cell *matCellDef="let movimento"> {{movimento.mapValue.fields.data.timestampValue | date}}
</td>
</ng-container>
<ng-container matColumnDef="desc">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Descrição</th>
<td mat-cell *matCellDef="let movimento"> {{movimento.mapValue.fields.desc.stringValue}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 20, 40]" showFirstLastButtons></mat-paginator>
组件:
@Component({
selector: 'app-movimentar',
templateUrl: './visualizar-movimentos.component.html',
styleUrls: ['./visualizar-movimentos.component.css']
})
export class VisualizarMovimentosComponent implements OnInit {
user: firebase.User;
userData;
displayedColumns: string[] = ['movimento', 'valor', 'data', 'desc'];
dataSource = new MatTableDataSource<Movimentos>();
@ViewChild(MatPaginator, { static: false })
set paginator(value: MatPaginator) {
this.dataSource.paginator = value;
}
@ViewChild(MatSort, { static: false }) sort: MatSort;
constructor(private auth: AuthService,
private router: Router,
private afs: AngularFirestore) { }
ngOnInit() {
this.auth.getUserState()
.subscribe(user => {
this.user = user;
this.getUserData();
});
}
/* loadLessonsPage() {
this.dataSource._orderData;
debugger
} */
getUserData(): void {
this.auth.getUserData(this.user.uid)
.subscribe(user => {
this.userData = user;
this.dataSource = new MatTableDataSource(this.userData._document.proto.fields.movimentos.arrayValue.values);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
login() {
this.router.navigate(['login']);
}
logout() {
this.auth.logout();
this.router.navigate(['inicio']);
}
register() {
this.router.navigate(['/register']);
}
trackByUid(index, item) {
return item.uid;
}
}```
Thanks for the help in advance.
问题在于来自 firebase 的数据,它与 mat 排序不兼容。 要解决它,您需要一张这样的地图:
这是地图
return data.reduce((acc, value) => {
return [
...acc,
Object.entries(value.mapValue.fields).reduce((accValue, [key, value]) => {
return {
...accValue,
[key]: Object.values(value)[0]
}
}, {})
]
}, [])
}
您需要像这样在表中以及要对数据进行排序的列上指定 mat sort 。
<table matSort (matSortChange)="sortData($event)">
</table>
用于按列排序
<th mat-header-cell *matHeaderCellDef mat-sort-header>
在您的 .ts 文件中
@ViewChild(MatSort, { static: false }) set content(content: ElementRef) {
this.sort = content;
if (this.sort) {
this.dataSource.sort = this.sort;
}
}
而你在加载数据的时候就已经完成了这部分
getUserData(): void {
this.auth.getUserData(this.user.uid)
.subscribe(user => {
this.userData = user;
this.dataSource = new MatTableDataSource(this.userData._document.proto.fields.movimentos.arrayValue.values);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
它现在应该可以工作了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.