Angular Material表格无法显示Firebase数据求助

我正在学习结合Firebase数据库的Angular Material开发，尝试获取Firebase中的所有数据，但数据无法在Material表格中显示。控制台打印确认已成功获取数据，却无法在HTML页面渲染。已参照表格文档操作，但问题仍存在。

原始HTML代码 #

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>
    
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>
  
    <!-- ID Column -->
    <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
       <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>
  
     <!-- First Name Column -->
    <ng-container matColumnDef="firstName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
      <td mat-cell *matCellDef="let row"> {{row.firstName}}% </td>
    </ng-container>
  
     <!-- Last Name Column -->
    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
       <td mat-cell *matCellDef="let row"> {{row.lastName}} </td>
     </ng-container>
  
     <!-- Email Column -->
     <ng-container matColumnDef="email">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
       <td mat-cell *matCellDef="let row"> {{row.email}} </td>
     </ng-container>
  
     <!-- Mobile Column -->
     <ng-container matColumnDef="mobile">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile </th>
       <td mat-cell *matCellDef="let row"> {{row.mobile}} </td>
    </ng-container>

      <!-- BMI Result Column -->
    <ng-container matColumnDef="bmiResult">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> BMI </th>
      <td mat-cell *matCellDef="let row"> {{row.bmiResult}} </td>
    </ng-container>

     <!-- Gender Column -->
      <ng-container matColumnDef="gender">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Gender </th>
      <td mat-cell *matCellDef="let row"> {{row.gender}} </td>
    </ng-container>

    <!-- Membership Column -->
    <ng-container matColumnDef="membership">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Membership </th>
      <td mat-cell *matCellDef="let row"> {{row.membership}} </td>
    </ng-container>

    <!-- Start Date Column -->
    <ng-container matColumnDef="startDate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>
      <td mat-cell *matCellDef="let row"> {{row.startDate | date}} </td>
    </ng-container>

    <!-- Action Column -->
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
      <td mat-cell *matCellDef="let row"> 
        <button>View</button>
        <button>Edit</button> 
        <button>Delete</button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  
    <!-- Row shown when there is no matching data. -->
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
      </tr>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
</div>

原始TS代码 #

export class RegistrationListComponent implements OnInit {
  
public users!: User[];
public dataSource!: MatTableDataSource<User>;

@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) matsort!: MatSort;
displayedColumns: string[] = ['id','firstName', 'lastName', 'email', 'mobile', 'bmiResult', 
  'gender', 'membership', 'startDate', 'action']

constructor(private api: ApiService){}

ngOnInit() {
  this.getUsers();
    
}
getUsers(){

this.api.getRegisteredUser().subscribe(result =>{
  if(!result){
    return;
  }
    this.dataSource = new MatTableDataSource(this.users);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.matsort;
    console.log(result)
  });
}

applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();

  if (this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
  }
 }
}

解决方案 #

核心问题 #

你没有将Firebase返回的result赋值给this.users，而是直接使用未初始化的this.users创建MatTableDataSource，导致数据源为空。此外还有两处细节需要调整：

修正后的TS代码 #

export class RegistrationListComponent implements OnInit, AfterViewInit {
  
public users!: User[];
public dataSource!: MatTableDataSource<User>;

@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) matsort!: MatSort;
displayedColumns: string[] = ['id','firstName', 'lastName', 'email', 'mobile', 'bmiResult', 
  'gender', 'membership', 'startDate', 'action']

constructor(private api: ApiService){}

ngOnInit() {
  this.getUsers();
}

// 确保分页器和排序组件初始化完成后再绑定
ngAfterViewInit() {
  if (this.dataSource) {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.matsort;
  }
}

getUsers(){
  this.api.getRegisteredUser().subscribe(result =>{
    if(!result){
      return;
    }
    // 将Firebase返回的数据赋值给users变量
    this.users = result;
    // 使用赋值后的users创建数据源
    this.dataSource = new MatTableDataSource(this.users);
    // 若视图已初始化，直接绑定分页器和排序
    if (this.paginator && this.matsort) {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.matsort;
    }
    console.log(result)
  });
}

applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();

  if (this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
  }
 }
}

修正后的HTML细节 #

无数据行的colspan值需要与列数一致（当前为10列），避免布局错乱：

<tr class="mat-row" *matNoDataRow>
  <td class="mat-cell" colspan="10">No data matching the filter "{{input.value}}"</td>
</tr>

内容的提问来源于stack exchange，提问作者kaiszn