角度可编辑表格单元格内联

Question

我正在尝试重新调整此示例 https://stackblitz.com/edit/angular-mat-table-editable?file=app%2Ftable-basic-example.html 以对其进行重构。我试图避免在此块的视图中重复：

 <td mat-cell *matCellDef="let element; let i = index">
        <editable (update)="updateField(i, 'name')">
          <ng-template viewMode>
            {{element[item]}}
          </ng-template>
          <ng-template editMode>
            <mat-form-field class="example-full-width">
              <input matInput [formControl]="getControl(i, item)" />
            </mat-form-field>          
          </ng-template>
        </editable>
      </td>

在一行中替换它：

 <td mat-cell *matCellDef="let element; let i = index">
        <editable (update)="updateField(i, 'name')" [value]="element[item]" [control]="getControl(i,item)"></editable>
      </td>

问题是我的 ViewMode 指令的 TemplateRef 出错，这是我尝试的 https://stackblitz.com/edit/angular-mat-table-editable-86ydth?file=app%2Feditable%2Feditable.component.ts。

提前致谢