Angularfire2 导航后数据不可用

Question

我正在使用 angularfire2 中的 firestore，我正确地将集合中的数据显示到 Angular Material 表，但如果我导航到另一个页面，则数据不会显示。

我应该使用异步管道来解决这个问题，但是将其放置在 Angular Material 表中的位置

<section class="tableSize">
  <div class="example-container mat-elevation-z8">
      <div class="example-header">
      </div>
    <mat-table #table [dataSource]="dataSource" matSort>

      <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->

      <!-- Position Column -->
      <ng-container matColumnDef="nom">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Nom </mat-header-cell>
        <mat-cell *matCellDef="let element" [routerLink]="['/data/'+element.id]"> {{element.nom}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="prenom">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Prénom </mat-header-cell>
        <mat-cell *matCellDef="let element" [routerLink]="['/data/'+element.id]"> {{element.prenom}} </mat-cell>
      </ng-container>      


      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns; let index=index"></mat-row>


    </mat-table>


<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[10, 20]">
</mat-paginator>

这是附加到该模板的组件

import { Component, OnInit, ViewChild, Inject, OnDestroy} from '@angular/core';
import {MatTableDataSource, MatSort, MatPaginator, MatExpansionModule} from '@angular/material';

    import { Router } from '@angular/router';
    import { DataService } from '../../services/data.service';
    import { Observable } from 'rxjs/Observable';
    import { AngularFirestore } from 'angularfire2/firestore';
    import {DataSource} from '@angular/cdk/collections';

    @Component({
      selector: 'app-data-preview',
      templateUrl: './data-preview.component.html',
      styleUrls: ['./data-preview.component.css']
    })
    export class DataPreviewComponent implements OnInit, OnDestroy {
       displayedColumns = ['nom', 'prenom', 'telephone', 'secteur', 'departement', 'commune', 'typeF', 'statut'];
       dataSource = new FirebaseDataSource(this.dataService);
       @ViewChild(MatPaginator) paginator: MatPaginator;
       @ViewChild(MatSort) sort: MatSort;


      constructor(private router: Router, private dataService: DataService,
         private afs: AngularFirestore) { }

      ngOnInit() {
        this.dataService.getData().subscribe(datas => {
          console.log(datas);
        });
      }

      ngOnDestroy(){
        this.dataService.getData().subscribe(datas => {
          console.log.apply(datas);
        });
      }

      ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      }

      isExpansionDetailRow = (i: number,row: any) => row.hasOwnProperty('detailRow');
    }


    export class FirebaseDataSource extends DataSource<any> {

      constructor(private data: DataService) {
        super();
      }

      connect() {
        return this.data.getData();
      }

      disconnect() {
      }
    }

有什么建议吗？

Answer 1

我猜您正在使用服务来获取数据，或者至少在 component.ts 文件中的某个位置使用 .subscribe() 。

我还假设，您在 ngOnInit()

内获得了日期

确保在组件中实现 OnDestroy，然后使用 ngOnDestory()。您应该在 ngOnDestory() 中取消订阅。

这是一个例子:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CustomersService } from '../../providers/customers.service';
import { Customer } from '../../models/Customer';
import { Subscription } from 'rxjs/Subscription';


export class CustomersComponent implements OnInit, OnDestroy {
  customers: Customer[];
  private subscription: Subscription[] = [];
  constructor(private customerService: CustomersService, public dialog: MatDialog) {  }

  ngOnInit() {
    this.subscription.push(this.customerService.getCustomers().subscribe(customers => {
      this.customers = customers;
    }));
  }

  ngOnDestroy() {
    this.subscription.forEach(sub => {
      sub.unsubscribe();
    });
  }
}

我建议你看看lifecycle-hooks