Question

我在Mat表格中有2列：键和值。我要在单击“编辑”按钮图标后编辑值部分，并在单击“更新”按钮后进行控制台。

html文件

<div>
    <button mat-stroked-button class="b1" (click)="update()">Update</button>
    <h5>Request Details</h5>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="key">
        <td mat-cell *matCellDef="let element" class="item-name"> {{element.key}} </td>
        </ng-container>

        <ng-container matColumnDef="value">
            <td mat-cell *matCellDef="let element"> {{element.value}} </td>

            <mat-form-field floatLabel="never" *ngIf="isValid">
                <input matInput placeholder="Value" [value]="element.value" [(ngModel)]="element.value">
            </mat-form-field>
        </ng-container>     



            <ng-container matColumnDef="actions">
                <mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
                <mat-cell *matCellDef="let row">
                  <button mat-icon-button matTooltip="Click to Edit" (click)="onCreateInput()" class="iconbutton" color="primary">
                      <mat-icon aria-label="Edit">edit</mat-icon>
                    </button>
                </mat-cell>
              </ng-container>


        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

ts文件

isValid:boolean=false
  onCreateInput()
  {
    this.isValid=true;
  }
  update()
  {
    console.log("Hello")
  }

Answer 1

也许您禁用输入而不是不渲染会有所帮助，如果这对您没有帮助，也许您可以共享一个repo或stackblitz来帮助您实现它

          <ng-container matColumnDef="value" >
           <th mat-header-cell *matHeaderCellDef> No. </th>
           <td mat-cell *matCellDef="let element" > 
             <span *ngIf="!element.editable; else editPlace">
              {{element.value}} 
             </span>
             <ng-template #editPlace>
               <input [(ngModel)]="element.value" 
                (keyup.enter)="element.editable = false" >
             </ng-template>
           </td>
          </ng-container>

在您的ts文件上：

   toggleValid() {
     this.isValid = !this.isValid;
   }

可能比只分配给true

更好

编辑

这将有助于完成 https://stackblitz.com/edit/angular-ifrzkl-bmsx3d?file=src%2Fapp%2Ftable-basic-example.html

如何以角度编辑垫单元数据

1 个答案: