我需要以角度添加，编辑席子表的操作

Question

我在其中需要编辑表格。在表中，它们是“编辑”图标按钮，如果我单击“编辑”按钮，则前三列应该是可编辑的，并且在编辑后需要更新。编辑应该只在同一行中而不是在mat-dialog box中。如果按编辑按钮名称，年龄，电话号码，则应可编辑。请帮助我

<div class="table-container mat-elevation-z8">
  <mat-table mat-stretch-tabs [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
   <ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef mat-sort-header > SiteName <mat-icon>filter_list</mat-icon> </mat-header-cell>
      <mat-cell *matCellDef="let row" > 

            <mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
              <input matInput placeholder="SiteName" [value]="row.name"  [(ngModel)]="row.name">
            </mat-form-field>

         </mat-cell>
   </ng-container>


    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header > SiteDiscription <mat-icon>filter_list</mat-icon> </mat-header-cell>
      <mat-cell *matCellDef="let row" > 

            <mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
              <input matInput  [readonly]="!row.editing" placeholder="SiteDiscription" [value]="row.description" [(ngModel)]="row.description">
            </mat-form-field>

       </mat-cell>
    </ng-container>


      <ng-container matColumnDef="databaseId">
        <mat-header-cell *matHeaderCellDef mat-sort-header > Database <mat-icon>filter_list</mat-icon> </mat-header-cell>
        <mat-cell *matCellDef="let row" > 

              <mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
                <input matInput [readonly]="!row.editing" placeholder="Database" [value]="row.databaseId" [(ngModel)]="row.databaseId">
              </mat-form-field>

         </mat-cell>
     </ng-container>

      <ng-container matColumnDef="isActive">
          <mat-header-cell *matHeaderCellDef  > IsActive/InActive </mat-header-cell>
          <mat-cell *matCellDef="let row" ><mat-slide-toggle color="primary" [checked]="row.isActive"></mat-slide-toggle></mat-cell>
      </ng-container>

      <ng-container matColumnDef="edit">
        <mat-header-cell *matHeaderCellDef > Edit </mat-header-cell>
        <mat-cell *matCellDef="let row">
          <button  mat-icon-button color="primary" focusable="false" (click)="edit()" >
            <mat-icon>edit</mat-icon>
          </button>
          <button *ngIf="row.editing" mat-icon-button color="primary" focusable="false" (click)="row.confirmEditCreate()">
              <mat-icon>done</mat-icon>
            </button>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="delete">
        <mat-header-cell *matHeaderCellDef > Delete </mat-header-cell>
        <mat-cell *matCellDef="let rowrow">
          <button mat-icon-button color="primary" (click)="clickEvent(row,row.principalId)"  [ngClass]="{'myClass':row.isClicked}">
            <mat-icon>remove_circle</mat-icon>
          </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(siteList)"></mat-row>
  </mat-table>
</div>

<div>
 <div class='left'>
   <button class="mat-button menu-button">
      <mat-icon color="primary"> add_to_photos </mat-icon>
      Add Site
   </button>
  </div>
  <div *ngIf="showButtons" class='right'>
    <button mat-button type="button"  class="close-button" (click)="cancel()">
      <mat-icon>block</mat-icon>
     CANCEL
    </button>       
   <button (click)="delete()">Save</button>
  </div> 
</div>