Angular 13中使用ngFor创建Mat-Table时mat-footer-cell未渲染的技术求助

Hey there! The reason your mat-footer-cell elements aren't showing up (and aren't even present in the DOM) is that you've defined the footer cells but haven't added a footer row definition to render them. Angular Material requires you to explicitly declare the footer row, just like you did for the header and data rows.

Here's how to fix this:

Step 1: Add the Mat-Footer-Row to Your Table #

Add this line right after your mat-row definition:

<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>

This tells Angular Material to render a footer row that matches the columns specified in your displayedColumns array. Since you only defined footer cells for the debit and credit columns, those will show your "Sum" text, while the other columns in the footer row will be empty (which is exactly what you want).

Step 2: Verify Your DisplayedColumns Array #

Make sure your component's displayedColumns array includes all the columns you're using, including debit and credit (which it should already be doing, since your header and data rows are working). For reference, it should look something like this in your component.ts:

displayedColumns: string[] = ['accountNo', 'accountDetails', 'date', 'transactionDetails', 'debit', 'credit', 'balance'];

Modified Full HTML Code #

Here's your updated table section with the footer row added:

<mat-table [dataSource]="source.data" matSort>
  <!-- Account No Column -->
  <ng-container matColumnDef="accountNo">
    <mat-header-cell *matHeaderCellDef>Account No</mat-header-cell>
    <mat-cell *matCellDef="let element; let i = index">
      <span *ngIf="i == 0">{{source.accountNo}} </span>
    </mat-cell>
  </ng-container>
  <!-- accountDetails Column -->
  <ng-container matColumnDef="accountDetails">
    <mat-header-cell *matHeaderCellDef> Account Details</mat-header-cell>
    <mat-cell *matCellDef="let element; let i = index">
      <span *ngIf="i == 0">{{source.accountName}} </span>
    </mat-cell>
  </ng-container>
  <!-- DateColumn -->
  <ng-container matColumnDef="date">
    <mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.date | date: "shortDate"}} </mat-cell>
  </ng-container>
  <!-- transactionDetails Column -->
  <ng-container matColumnDef="transactionDetails">
    <mat-header-cell *matHeaderCellDef> Transaction Details</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.detail}} </mat-cell>
  </ng-container>
  <!-- debit Column -->
  <ng-container matColumnDef="debit">
    <mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
    <mat-cell *matCellDef="let element">
      <span *ngIf="element.debitAccountNo == source.accountNo"> {{element.amount}} </span>
    </mat-cell>
    <mat-footer-cell *matFooterCellDef> Sum </mat-footer-cell>
  </ng-container>
  <!-- credit Column -->
  <ng-container matColumnDef="credit">
    <mat-header-cell *matHeaderCellDef>Credit </mat-header-cell>
    <mat-cell *matCellDef="let element">
      <span *ngIf="element.creditAccountNo == source.accountNo"> {{element.amount}} </span>
    </mat-cell>
    <mat-footer-cell *matFooterCellDef> Sum </mat-footer-cell>
  </ng-container>
  <!-- Balance Column -->
  <ng-container matColumnDef="balance">
    <mat-header-cell *matHeaderCellDef>Balance</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{calcBalance(element.debitAccountNo, element.creditAccountNo, source.accountNo, element.amount)}} </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  <!-- Added footer row here -->
  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>

Why This Works #

Without the mat-footer-row definition, Angular Material has no instruction to render the footer cells you've created. Adding this row ties your footer cells to the table structure, making them appear in the DOM and on the page.

If you ever wanted to only show the footer for specific columns (instead of all columns in displayedColumns), you could pass a subset array to *matFooterRowDef (e.g., ['debit', 'credit']), but that would make the footer row only span those two columns. Using the full displayedColumns array keeps the footer aligned with your header and data rows, which is probably what you want here.

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