导航后Angularfire2数据不可用

Question

我正在使用来自 angularfire2 的 firestore，我正确地将数据从一个集合显示到一个角度材料表，但如果我导航到另一个页面，数据将不会显示。

我应该使用异步管道来解决这个问题，但是将它放在角度材料表中的哪个位置

<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