如何将ngFor和ngIf放在MAT表中

时间:2019-04-29 11:23:09

标签: angular typescript angular-material

我在一张席子桌子上显示姓名。 但是,我有一个名称数组,如果条件名称类型等于主名称,则要在表上显示该名称。 我该如何实现?

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);
 });

1 个答案:

答案 0 :(得分:3)

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