無法在Material Datatable中使用AngularFirestore獲取對象鍵

Question

我有一個包含3個文檔的材料數據表。 在這些列中，我有一個編輯列，該列需要獲取id（$ key），以便可以路由到/ object：id。

我懷疑這與異步加載有關，但是在盡我最大的能力進行了徹底搜索之后，我並沒有真正找到可靠的答案， 或者，坦白地說，我真的不知道要尋找什么關於如何將其整合到數據表中的內容。 。

<mat-table #table [dataSource]="vehicle1" [trackBy]="trackByUid" matSort>

當我如上所述使用集合（可觀察的）作為我的數據表源時，我能夠獲取鍵並顯示它們，盡管即使顯示了內容，它也會使數據表功能無效，例如過濾和排序。

這是我的TS和模板文件：

（我嘗試為多個屬​​性[uid，$ key]分配相同的值，以確保它不是關鍵字問題）

 import { Component, AfterViewInit, ViewChild } from '@angular/core'; import { MatTableDataSource, MatSort, MatDialog } from '@angular/material'; import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore'; import { StatusDialogComponent } from './status-dialog/status-dialog.component'; import { Vehicle } from '../vehicle'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Component({ moduleId: module.id, selector: 'app-list-vehicles', templateUrl: 'list-vehicles.component.html', styleUrls: ['list-vehicles.component.scss'] }) export class ListVehiclesComponent implements AfterViewInit { vehicleKey: {}; vehicles$: AngularFirestoreCollection<Vehicle>; vehicles: Observable<Vehicle[]>; vehicle: AngularFirestoreDocument; displayedColumns = ['vin', 'make', 'model', 'status', '$key', 'details', 'edit']; dataSource: MatTableDataSource<any>; @ViewChild(MatSort) sort: MatSort; constructor( public afs: AngularFirestore, public dialog: MatDialog, ) { this.vehicles = this.afs.collection(`vehicles`).snapshotChanges().pipe( map(actions => { return actions.map(a => { const data = a.payload.doc.data() as Vehicle; const $key = a.payload.doc.id; console.log('payload: ' + a.payload.doc.id); data.$key = a.payload.doc.id; data.uid = a.payload.doc.id; if (data.$key === null || data.$key === undefined) {console.log('null.'); } else {console.log('full' + data.$key); } return {$key, ...data}; }); }) ); } ngAfterViewInit(): void { this.afs.collection<Vehicle>('vehicles').valueChanges().subscribe(data => { this.dataSource = new MatTableDataSource(data); this.dataSource.sort = this.sort; }); } applyFilter(filterValue: string) { filterValue = filterValue.trim(); filterValue = filterValue.toLowerCase(); this.dataSource.filter = filterValue; } openStatusDialog(data): void { const dialogRef = this.dialog.open(StatusDialogComponent, { width: '400px', data: data, }); } trackByUid(index, item) { return item.uid; } } 

 <div *ngFor="let veh of vehicles | async"> {{veh.$key}} <!-- I can fetch the keys here. --> </div> <div *ngIf="vehicles | async as vehicle1"> <button mat-raised-button color="accent"> A Useless Button </button> <div class="example-header"> <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field> </div> <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort> <ng-container matColumnDef="vin"> <mat-header-cell *matHeaderCellDef mat-sort-header>VIN</mat-header-cell> <mat-cell *matCellDef="let vehicle"> {{vehicle.vin}} </mat-cell> </ng-container> <ng-container matColumnDef="make"> <mat-header-cell *matHeaderCellDef mat-sort-header>Make</mat-header-cell> <mat-cell *matCellDef="let vehicle"> {{vehicle.make}} </mat-cell> </ng-container> <ng-container matColumnDef="model"> <mat-header-cell *matHeaderCellDef mat-sort-header>Model</mat-header-cell> <mat-cell *matCellDef="let vehicle"> {{vehicle.model}} </mat-cell> </ng-container> <ng-container matColumnDef="status"> <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell> <mat-cell *matCellDef="let vehicle"> {{vehicle.status}} </mat-cell> </ng-container> <ng-container matColumnDef="$key"> <mat-header-cell *matHeaderCellDef mat-sort-header>Key</mat-header-cell> <mat-cell *matCellDef="let vehicle"> {{vehicle.$key}} </mat-cell> </ng-container> <ng-container matColumnDef="details"> <mat-header-cell *matHeaderCellDef mat-sort-header>Details</mat-header-cell> <mat-cell *matCellDef="let vehicle"> <button mat-raised-button color="primary" [routerLink]="['/vehicles', vehicle.$key]"> Details </button> </mat-cell> </ng-container> <ng-container matColumnDef="edit"> <mat-header-cell *matHeaderCellDef mat-sort-header>Edit</mat-header-cell> <mat-cell *matCellDef="let vehicle"> <button mat-raised-button color="warn" (click)="openStatusDialog(vehicle)"> Edit </button> </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;" class="animate"></mat-row> </mat-table> Json: {{(vehicle1 | json)}} <!-- I can also fetch them here. --> </div> 

這是當我使用“ dataSource”作為數據表源時：

這是當我使用observable作為數據表源時：

由於我可以使用可觀察的異步方式以某種方式獲取密鑰，因此如何將類似的方法合並到數據表中，以便可以使用數據表獲取密鑰？ 有沒有其他方法可以使用我可能會錯過的材料數據表導航到集合中的文檔？

Answer 1

訂閱可觀察的數據源，而不是訂閱集合即可解決此問題。

所以這：

this.afs.collection<Vehicle>('vehicles').valueChanges().subscribe(data => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.sort = this.sort;
    });

替換為：

this.vehicles.subscribe((d) => this.dataSource = new MatTableDataSource(d));