无法在 Material 数据表中使用 AngularFirestore 获取对象键

Question

我有一个包含 3 个文档的 Material 数据 table。在列中，我有一个编辑列需要获取 ID（$key），以便我可以路由到 /object:id.

我怀疑这与异步加载有关，但在尽我所能进行彻底搜索后，我无法真正找到可靠的答案，或者说，我真的不知道是什么搜索关于如何将其合并到数据table。

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

当我如上所述使用集合（可观察的）作为我的数据table源时，我能够获取键并显示它们，但是即使显示内容，它也会呈现数据table过滤排序等无用功能

这是我的 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" 作为数据 table 来源的时候：

这是我使用 observable 作为数据 table 来源的时候：

由于我能够以某种方式使用可观察的异步获取密钥，我如何将类似的方法合并到数据 table 以便我可以使用数据 table 获取密钥？是否有另一种方法可以使用我可能错过的 material 数据 table 导航到集合中的文档？

Answer 1

订阅 observable 来构建数据源而不是订阅集合解决了这个问题。

所以这样：

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));

无法在 Material 数据表中使用 AngularFirestore 获取对象键

Can't Fetch Object Keys Using AngularFirestore in Material Datatable

angular

angular-material

angularfire

angularfire5