Как поменять только нажатую кнопку в таблице mat на другую (в каждой строке одна и та же начальная кнопка)

Question

В каждой строке таблицы соответствия отображается столбец , отображается начальная кнопка Вид . При нажатии на одну кнопку «Вид» кнопка Закрыть отображается в строках ВСЕ после нажатия одной кнопки «Просмотр».

Исходное состояние мат-таблицы

Кнопка закрытия в каждом ряду

<mat-table [dataSource]="purchaseSource">
  <ng-container matColumnDef="projectName">
    <mat-header-cell *matHeaderCellDef>Project Name</mat-header-cell>
    <mat-cell *matCellDef="let purchase"> {{purchase.projectName}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="supplier">
    <mat-header-cell *matHeaderCellDef>Supplier</mat-header-cell>
    <mat-cell *matCellDef="let purchase"> {{purchase.supplier_name}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="profName">
    <mat-header-cell *matHeaderCellDef>Purchase Author</mat-header-cell>
    <mat-cell *matCellDef="let purchase"> {{purchase.author_name}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="submittedDate">
    <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
    <mat-cell *matCellDef="let purchase"> {{purchase.submittion_date}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="status">
    <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
    <mat-cell *matCellDef="let purchase"> {{purchase.status}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="total">
    <mat-header-cell *matHeaderCellDef>Total</mat-header-cell>
    <mat-cell *matCellDef="let purchase"> {{purchase.total}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="details">
    <mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
    <mat-cell *matCellDef="let purchase">
      <button mat-button color="primary" *ngIf=!display.details 
              (click)="displaySelectedDetails(purchase)">View</button>
      <button mat-button color="warn" *ngIf=display.details 
              (click)="displayPurchaseTable()">Close</button>
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="colToDis"></mat-header-row>
  <mat-row *matRowDef="let row; columns: colToDis"></mat-row>
</mat-table>

HTML-строки кода выше, содержащие кнопки в каждой строке:

<button mat-button color="primary" *ngIf=!display.details 
        (click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details 
        (click)="displayPurchaseTable()">Close</button>

Ниже приведены методы машинописи, которые выполняют кнопки. (для вашей информации)

/** Displays the Purchase Table by reseting all display boolean objects.  Causing the View button to be displayed  */
displayPurchaseTable() {
  this.resetDisplays();
  this.selectedPurchase = null;
}

/** Displays the details of the given purchase. */
displaySelectedDetails(purchase: Purchase) {
  this.toDisplay('details');
  this.selectedPurchase = purchase;
}

/**
  * Displays either the purchase-create or purchase-details
  * or purchase-sheets component.
  */
toDisplay(toDisplay: string) {
  this.selectedPurchase = null;
  this.resetDisplays();
   switch (toDisplay) {
    case 'createPurchase': this.display.createPurchase = true; break;
    case 'details': this.display.details = true; break;
    default: this.display.sheets = true; break;
  }
}

Можно ли отобразить кнопку Закрыть только в той строке, в которой пользователь нажал кнопку «Просмотр»?