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

2024年2月2日 367次阅读

我有一个mat-table从firebase加载数据.

全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对象来填充我的表. dataSource在all-matches.component.ts中实例化：

全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

最佳答案 创建BehaviorSubject对象&然后将其转换为Observable是一种好方法,但更改发生在与AllMatchesComponent不同的上下文中.因此,您不仅要订阅组件类中$loading的更改,还要更新模型值(更改检测)

你可以用以下方式做到这一点：

1.使用NgZone.run()：NgZone是一个可注入的服务,用于执行Angular区域内部或外部的工作.通过run运行函数将允许您从上下文执行的任务重新进入Angular区域.
因此,在组件和组件中注入NgZone. MatchDataSource：

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.在另一种方法中,您可以跳过使用异步管道和放大器.只需订阅datasource.$loading然后使用ChangeDetectorRef更新模型var中的更改.

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>

然后这将按预期工作&更改将更新.

点赞