Как положить ngFor и ngIf в MAT-таблицу

Question

У меня есть таблица матов, где я показываю имя. Тем не менее, у меня есть массив имен, и я хочу поставить условие, где, если тип имени равен первичному имени, тогда показать это имя в таблице. Как мне этого добиться?

Код для 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.Следовательно, фильтрация customerSearchRecordList из машинописного кода перед рендерингом в HTML была бы идеальным решением.