Angular - 材料表，是不是可以通过单击按钮来编辑行？

Posted 2023-03-13

【中文标题】Angular - 材料表，是不是可以通过单击按钮来编辑行？

【英文标题】：Angular - Material Table, is it possible to edit rows by clicking a button?Angular - 材料表，是否可以通过单击按钮来编辑行？

【发布时间】：2019-04-03 11:41:05

【问题描述】：

我有 mat-table 我需要编辑表格。在表中，它们是编辑图标按钮，如果我单击编辑按钮，前 3 列应该是可编辑的，并且需要在编辑后更新。 编辑应该在同一个内联中，而不是 mat-dialogue box 。如果我们按下编辑按钮名称，年龄，电话号码应该是可编辑的。请在这方面帮助我

.html 文件

        <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 >  Name <mat-icon>filter_list</mat-icon> </mat-header-cell>
              <mat-cell *matCellDef="let datalist " > datalist.name </mat-cell>
           </ng-container>


            <ng-container matColumnDef="description">
              <mat-header-cell *matHeaderCellDef mat-sort-header > Age <mat-icon>filter_list</mat-icon> </mat-header-cell>
              <mat-cell *matCellDef="let datalist" > datalist.age </mat-cell>
            </ng-container>
              <ng-container matColumnDef="databaseId">
                <mat-header-cell *matHeaderCellDef mat-sort-header >  <mat-icon>filter_list</mat-icon> </mat-header-cell>
                <mat-cell *matCellDef="let datalist" > datalist.phonenumber </mat-cell>
             </ng-container>

              <ng-container matColumnDef="isActive">
                  <mat-header-cell *matHeaderCellDef  > IsActive/InActive </mat-header-cell>
                  <mat-cell *matCellDef="let datalist" ><mat-slide-toggle color="primary" [checked]="datalist.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" >
                    <mat-icon>edit</mat-icon>
                  </button>
                </mat-cell>
              </ng-container>

              <ng-container matColumnDef="delete">
                <mat-header-cell *matHeaderCellDef > Delete </mat-header-cell>
                <mat-cell *matCellDef="let datalist">
                  <button mat-icon-button color="primary" (click)="clickEvent(datalist,datalist.principalId)"  [ngClass]="'myClass':datalist.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(datalist)"></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>   

    

【参考方案1】：

此答案并非特定于 mat-table，但请尝试将 PrimeNG 用于可编辑表格。

https://www.primefaces.org/primeng/#/table/edit