Angular MAT表的内联文本编辑未刷新编辑图标

我正在试着为垫子桌子做内联编辑. 我在第1页中沿着链接https://stackblitz.com/edit/angular-custom-pagination-mat-table?file=src%2Fmain.ts编辑第二行(编辑符号图标已更改)，但没有保存正在移动到下一页的更改.在下一页中，第二行显示LIKE SAVE图标(出现在第1页).

Page 1, 2nd Row:

Page 2, 2nd Row:

我try 使用分页来更新索引列，但不起作用. {{this.paginator.pageIndex*this.paginator.pageSize+i}}.

<ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>Name</th>
          <td
            mat-cell
            *matCellDef="let element; let i = index"
            [formGroup]="element"
          >
            <!-- <span [hidden]="VOForm.get('VORows').value[i].isEditable"> -->
            <mat-form-field
              style="width: 70px"
              [appearance]="VOForm.get('VORows').value[i].isEditable? 'none' : 'legacy'"
            >
              <input
                matInput
                type="text"
                formControlName="name"
                [readonly]="VOForm.get('VORows').value[i].isEditable"
              />
            </mat-form-field>
            <!-- </span> -->
          </td>
        </ng-container>

假设i=dataIndex不起作用.

请分享工作的解决方案，因为这个堆栈闪电战链接是完全相同的东西我需要.