Question

我有一个mat-table，可从firebase加载数据。

all-matches.component.html

...
<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">
    ...
    <ng-container matColumnDef="rank">
      <mat-header-cell *matHeaderCellDef> Rank </mat-header-cell>
      <mat-cell *matCellDef="let entry"> {{entry.rank}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="weightClass">
      <mat-header-cell *matHeaderCellDef> Weight Class </mat-header-cell>
      <mat-cell *matCellDef="let entry"> {{entry.weightClass}} </mat-cell>
    </ng-container>
    ...
    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
</mat-table>
...

根据在线建议（我尚不完全了解），我选择使用dataSource对象填充表。在all-matches.component.ts中实例化数据源：

all-matches.component.ts

...
@Component({
  selector: 'app-all-matches',
  templateUrl: './all-matches.component.html',
  styleUrls: ['./all-matches.component.scss']
})
export class AllMatchesComponent implements OnInit, OnDestroy, AfterViewInit {
  private columnsToDisplay = ['rank','weightClass', 'ageClass','athlete1Name', 'athlete2Name', 'gender','tournamentName','location', 'date', 'matchRating', 'videoUrl']; //TODO make this dynamic somehow
  private loading = true;
...
@ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private authService: AuthorizationService, private d3Service: D3Service, private dbService: DatabaseService, private textTransformationService: TextTransformationService, private dataSource: MatchDataSource) { }

  ngOnInit() {
    ...
    this.pageSize = 2; //TODO increase me to something reasonable
    this.dataSource = new MatchDataSource(this.dbService);
    this.dataSource.loadMatches('test', '', '', 0, this.pageSize);
    this.dbService.getMatchCount().subscribe(results=>{
      this.matchCount = results;
    });
    ...
    }

MatchDataSource.model.ts

import {CollectionViewer, DataSource} from "@angular/cdk/collections";
import { BehaviorSubject ,  Observable , of } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';
import { Match } from './match.model';
import { DatabaseService } from './database.service';
import { Injectable } from '@angular/core';

@Injectable()
export class MatchDataSource implements DataSource<Match> {

  private matchesSubject = new BehaviorSubject<Match[]>([]);
  private loadingMatches = new BehaviorSubject<boolean>(false);
  public loading$ = this.loadingMatches.asObservable();

  constructor(private dbService: DatabaseService) {}

  connect(collectionViewer: CollectionViewer): Observable<Match[]> {
    return this.matchesSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {
    this.matchesSubject.complete();
    this.loadingMatches.complete();
  }

  loadMatches(matchId: string, filter = '',
  sortDirection='asc', pageIndex: number, pageSize: number) {
    this.loadingMatches.next(true);
    this.dbService.getKeyOfMatchToStartWith(pageIndex, pageSize).subscribe(keyIndex=>{
      this.dbService.getMatchesFilteredPaginator(keyIndex, pageSize).pipe(
        catchError(()=> of([])),
        finalize(()=>{
          //TODO the tutorial here https://blog.angular-university.io/angular-material-data-table/ toggled the loading spinner off here, but it seemed to work better below for me?
        })
      )
      .subscribe(matches => {
        let results = this.makeIntoArray(matches);
        this.matchesSubject.next(results);
        // console.log("loading done");
        this.loadingMatches.next(false);
      });
    });
  }

  makeIntoArray(matches: any){
    let results = []; //TODO there should be a way to tighten the below up
    for(var i in matches){
      let obj1 = {id:matches[i].id};
      if(matches[i].matchDeets){
        let obj2 = matches[i].matchDeets;
        obj1 = Object.assign({}, obj1, obj2);
      }
      results.push(obj1);
    }
    // console.log(results);
    return results;
  }
}

行加载就很好了（尽管我有些担心扩展，因为我正在用可观察的总数计数行（为什么在Firebase节点中没有直接的方法来计数条目？）。

但是，当我重新加载页面时，微调框永远不会消失，行也不会填充。我欢迎任何建议！

再现我的问题：

git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout matTableSO

在/ src / app中制作一个api-keys.ts文件，并在其中填充要跟随的文本

api-keys.ts

export var masterFirebaseConfig = {
    apiKey: "AIzaSyCaYbzcG2lcWg9InMZdb10pL_3d1LBqE1A",
    authDomain: "dataJitsu.firebaseapp.com",
    databaseURL: "https://datajitsu.firebaseio.com",
    storageBucket: "",
    messagingSenderId: "495992924984"
  };

export var masterStripeConfig = {
  publicApiTestKey: "pk_test_NKyjLSwnMosdX0mIgQaRRHbS",
  secretApiTestKey: "sk_test_6YWZDNhzfMq3UWZwdvcaOwSa",
  publicApiKey: "",
  secretApiKey: ""
};

然后，在您的终端会话中，键入：

npm install
ng serve

Answer 1

创建BehaviorSubject对象然后将其转换为Observable是一个好方法，但是更改发生在与AllMatchesComponent不同的上下文中。因此，不仅您必须在组件类中订阅$ loading中的更改，而且还要更新模型值（更改检测）您可以通过以下方式做到这一点：

1 。使用NgZone.run()：NgZone是用于在Angular区域内或外部执行工作的可注入服务。通过运行运行功能将使您能够从上下文之外执行的任务重新进入Angular区域。因此，在组件和MatchDataSource中都注入NgZone：

import { NgZone } from '@angular/core';
constructor(..., private nz: NgZone) { }

然后，在AllMatchesComponent中更新数据源对象的创建：

this.dataSource = new MatchDataSource(this.dbService, this.nz);

对于此更新服务代码为：

  loadMatches(matchId: string, filter = '',
  sortDirection='asc', pageIndex: number, pageSize: number) {
    this.loadingMatches.next(true);
    this.dbService.getKeyOfMatchToStartWith(pageIndex, pageSize).subscribe(keyIndex=>{
      this.dbService.getMatchesFilteredPaginator(keyIndex, pageSize).pipe(
        catchError(()=> of([])),
        finalize(()=>{
          //TODO 
        })
      )
      .subscribe(matches => {
        let results = this.makeIntoArray(matches);
        this.nz.run(() => {
          this.matchesSubject.next(results);
          this.loadingMatches.next(false);
        });

      });
    });
  }

在您的代码中，我唯一更新的是，在订阅中，我使用NgZone.run（）封装了.next（）调用。无需其他更改，异步管道即可按预期工作

您可以参考Github Repo example。检查AllMatchesComponent和MatchDataSource

2 。在另一种方法中，您可以跳过async管道的使用并只订阅datasource.$loading，然后使用ChangeDetectorRef更新模型变量的更改。

import { ChangeDetectorRef } from '@angular/core';
constructor(..., private cdr: ChangeDetectorRef ) {  }

ngOnInit() {

//Keep other code as it is
// Uncomment loading$ subscribe & update it as below

  this.dataSource.loading$.subscribe(result =>{
     this.showLoader = result;
     this.cdr.detectChanges();
  });
}

在MatchDataSource服务中不进行任何更改。将加载程序模板代码更新为：

<div class="spinner-container" *ngIf="showLoader">
        <mat-spinner id="spinner"></mat-spinner>
</div>

这将按预期工作并且更改将被更新。

重新加载分页的mat-table无法在Angular中显示行

1 个答案: