如何在angular 7中生成包含特定字段的表中的空行

<table mat-table [dataSource]="dataSource">
  <!-- 表头定义 -->
  <ng-container matColumnDef="field1">
    <th mat-header-cell *matHeaderCellDef> Field 1 </th>
    <td mat-cell *matCellDef="let element"> {{element.field1}} </td>
  </ng-container>

  <ng-container matColumnDef="field2">
    <th mat-header-cell *matHeaderCellDef> Field 2 </th>
    <td mat-cell *matCellDef="let element"> {{element.field2}} </td>
  </ng-container>

  <!-- 表体定义 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  displayedColumns: string[] = ['field1', 'field2'];
  dataSource: any[] = [
    { field1: 'Value 1', field2: 'Value 2' },
    { field1: 'Value 3', field2: 'Value 4' }
  ];
}

export class TableComponent {
  displayedColumns: string[] = ['field1', 'field2'];
  dataSource: any[] = [
    { field1: 'Value 1', field2: 'Value 2' },
    { field1: 'Value 3', field2: 'Value 4' },
    {}
  ];
}

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'empty-row': !row.field1 && !row.field2}"></tr>