Question

我有一个如下的物料表：

https://i.stack.imgur.com/afTM2.png

单击笔，用户可以修改特定行的名称和描述，因为这两个字段成为输入字段：

https://i.stack.imgur.com/PWgEc.png

更改这些值后，他必须单击右侧的“保存”按钮。

我的问题是如何为每一行制作表格？因为两个输入字段和提交按钮在html中不是“一起”，所以我不能将它们放在相同的

中。

这是我的代码：

<table mat-table [(dataSource)]="maintenanceTypes" class="mat-elevation-z8" (pointerleave)="focusedRowId = -1">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element">
      <div *ngIf="editRowId != element.maintenanceTypeId">{{element.name}}</div>
      <div *ngIf="editRowId == element.maintenanceTypeId">
          <mat-form-field>
            <input name="name" [ngModel]="element.name" required maxlength=20 matInput autocomplete="off">
          </mat-form-field>
      </div>
    </td>
    </ng-container>
  
    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef> Description </th>
      <td mat-cell *matCellDef="let element">
        <div *ngIf="editRowId != element.maintenanceTypeId">{{element.description}}</div>
        <div *ngIf="editRowId == element.maintenanceTypeId">
          <mat-form-field class="full-width">
            <input [ngModel]="element.description" maxlength=80 matInput autocomplete="off">
          </mat-form-field>
        </div>
      </td>
    </ng-container>
  
    <ng-container matColumnDef="modifiedTime">
      <th mat-header-cell *matHeaderCellDef> Modified Time </th>
      <td mat-cell *matCellDef="let element"> {{element.modifiedTime | date: 'dd MMMM yyyy, HH:mm'}} </td>
    </ng-container>
  
    <ng-container matColumnDef="modifiedBy">
      <th mat-header-cell *matHeaderCellDef> Modified By </th>
      <td mat-cell *matCellDef="let element"> {{element.modifiedByUsername}} </td>
    </ng-container>

    <ng-container matColumnDef="del_mod">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell *matCellDef="let element">
        <div *ngIf="focusedRowId == element.maintenanceTypeId && editRowId != element.maintenanceTypeId">
          <button mat-icon-button color="primary" (click)="editRowId = element.maintenanceTypeId">
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button color="warn" (click)="deleteRecord(element)">
            <mat-icon>delete</mat-icon>
          </button>
        </div>
        <div *ngIf="editRowId == element.maintenanceTypeId">
          <button type="submit" mat-icon-button color="primary">
            <!-- [disabled]="!modifyForm.dirty" -->
            <mat-icon>save</mat-icon>
          </button>
          <button mat-icon-button color="warn" (click)="editRowId = -1">
            <mat-icon>clear</mat-icon>
          </button>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;" (pointerover)="focusedRowId = row.maintenanceTypeId"></tr>
</table>

Answer 1

您可以将Reactive forms与FormArray一起使用。示例：https://stackblitz.com/edit/angular-formarray-example-1?file=src%2Fapp%2Fapp.component.ts

角形材料表，每一行都有表格

1 个答案: