如何在不刷新页面的情况下将表单与外部按钮连接并提取数据

Question

我有这样的问题，我需要从中提取数据：

<ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Title </th>
        <td mat-cell *matCellDef="let row"><div id="{{'make_editable' + row.title}}">{{row.title}}</div></td>
    </ng-container>
...

<ng-container matColumnDef="buttonEdit">
            <th mat-header-cell *matHeaderCellDef> buttonEdit </th>
            <td mat-cell *matCellDef="let row"><button (click)="makeEditable(row.title)" class="mat-raised-button" form="myform">Edit</button></td>
    /ng-container>


  makeEditable(title){  
    console.log(this.checkOutForm.value.title);
    let id:string="make_editable"+title;
    if(this.toggleEdit()){   
      document.getElementById(id).innerHTML = `<form id="myform" (ng-submit)="extractFormValues()" [formGroup]="checkOutForm"><input type="text" value="${title}"></form>`;

    }
    else {
      document.getElementById(id).innerHTML = title;
      console.log(this.checkOutForm.controls.title.value);
    }

该按钮位于 function 之外。 如果单击编辑按钮，则输入包装数据并使其处于活动状态。 我需要在不刷新所有页面的情况下执行此操作。按钮编辑在表单之外

Answer 1

您可以在行具有的类型上创建 boolean 属性 - isEdited。

makeEditable(title) 将找到正确的行并切换其 isEdited 值。 它还将设置：

checkOutForm.setValue({title: title});

（如果 isEdited 设置为 true）。

在模板中，您可以将整个块包装在

<form id="myform" (ng-submit)="extractFormValues()" [formGroup]="checkOutForm"</form>

并更改标题的 td：

<td mat-cell *matCellDef="let row">
    <div *ngIf="!row.isEdited">{{row.title}}</div>
    <input *ngIf="row.isEdited" type="text" formControlName="title">
</td>

这仅适用于一次只编辑一行的情况。