如何将ngFor和ngIf放在MAT-Table中

Question

我有一个mat-table，我在显示名字。但是，我有一个名称数组，我想把条件放在哪里，如果名称类型等于主名称，然后在表格上显示该名称。我怎样才能做到这一点？

HTML代码：

<mat-table [dataSource]="customerSearchRecordList" matSort>
  <ng-container matColumnDef="index">
    <mat-header-cell *matHeaderCellDef> Number </mat-header-cell>
    <mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</mat-cell>
  </ng-container>
  <!-- First Name Column -->
  <ng-container matColumnDef="firstName" >
    <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.individualCustomer.individualName[0].firstName }}</mat-cell>
  </ng-container>

  <!-- Last Name Column -->
  <ng-container matColumnDef="lastName">
    <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.individualCustomer.individualName[0].lastName }}</mat-cell>
  </ng-container>

  <!-- Date of birth Column -->
  <ng-container matColumnDef="dateOfBirth">
    <mat-header-cell *matHeaderCellDef>Date Of Birth</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.individualCustomer.dateOfBirth | date: 'MM/dd/yyyy' }}</mat-cell>
  </ng-container>

  <!-- Gender Column -->
  <ng-container matColumnDef="gender">
    <mat-header-cell *matHeaderCellDef>Gender</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.individualCustomer.gender }}</mat-cell>
  </ng-container>
  <!-- Status Column -->
      <!-- View Button -->
  <ng-container matColumnDef="actions">
    <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
    <mat-cell *matCellDef="let element; let index = index">
      <button mat-icon-button color="#b71c1c" matTooltip="View" (click)="transferIndCustData(element)">
        <!-- <mat-icon aria-label="Delete"
          >delete</mat-icon
      > -->
        <i class="material-icons large" style="font-size: 50px">
          pageview
        </i>
      </button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></mat-row>
</mat-table>

打字稿代码：

 this.customer360Service.getCustbyLastName("'" + this.lastNameValue + "'").subscribe(
  data => {
    this.sampleData = data;
    this.customerSearchRecord = this.sampleData;
    this.customerSearchRecordList = new MatTableDataSource<Customer> 
    (this.customerSearchRecord);
 });

Answer 1

据我所知，在这种情况下，我们需要在HTML上显示过滤后的数据。因此，在HTML上呈现之前从typescript代码过滤customerSearchRecordList将是一个理想的解决方案。