У меня есть материал данных, который состоит из 3 документов.В столбцах у меня есть столбец редактирования, в котором нужно получить идентификаторы ($ 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>
Это когда я использую «источник данных» в качестве источника таблицы данных: 
Это когда я использую наблюдаемое в качестве источника таблицы данных: 
Поскольку я могу каким-то образом получить ключи, используя наблюдаемую асинхронность, как я могу включитьметод, аналогичный таблице данных, чтобы я мог получить ключи с помощью таблицы данных?Есть ли другой способ перехода к документам в коллекции с использованием таблиц данных материала, которые я мог пропустить?