如何捕获表格的td值，并在angular 7中单击编辑按钮时将其输入到输入字段中

在Angular 7中捕获表格的td值，并在单击编辑按钮时将其输入到输入字段中，可以按照以下步骤进行：

首先，在组件的HTML模板中创建一个表格，其中每个单元格都用td元素表示，并为每个单元格添加一个编辑按钮。例如：

<table>
  <tr>
    <td>{{ value1 }}</td>
    <td>{{ value2 }}</td>
    <td><button (click)="editCell(1)">编辑</button></td>
  </tr>
  <tr>
    <td>{{ value3 }}</td>
    <td>{{ value4 }}</td>
    <td><button (click)="editCell(2)">编辑</button></td>
  </tr>
  <!-- 其他行 -->
</table>

在组件的TypeScript文件中，定义表格中每个单元格的值，并创建一个变量来存储当前编辑的单元格索引。

export class YourComponent {
  value1: string = 'Value 1';
  value2: string = 'Value 2';
  value3: string = 'Value 3';
  value4: string = 'Value 4';

  editingCellIndex: number = -1;

  editCell(index: number): void {
    this.editingCellIndex = index;
  }
}

修改HTML模板，根据当前编辑的单元格索引显示输入字段或普通文本。

<table>
  <tr>
    <td>
      <ng-container *ngIf="editingCellIndex !== 1; else editCell1">
        {{ value1 }}
      </ng-container>
      <ng-template #editCell1>
        <input type="text" [(ngModel)]="value1">
      </ng-template>
    </td>
    <td>
      <ng-container *ngIf="editingCellIndex !== 2; else editCell2">
        {{ value2 }}
      </ng-container>
      <ng-template #editCell2>
        <input type="text" [(ngModel)]="value2">
      </ng-template>
    </td>
    <td><button (click)="editCell(1)">编辑</button></td>
  </tr>
  <tr>
    <td>
      <ng-container *ngIf="editingCellIndex !== 3; else editCell3">
        {{ value3 }}
      </ng-container>
      <ng-template #editCell3>
        <input type="text" [(ngModel)]="value3">
      </ng-template>
    </td>
    <td>
      <ng-container *ngIf="editingCellIndex !== 4; else editCell4">
        {{ value4 }}
      </ng-container>
      <ng-template #editCell4>
        <input type="text" [(ngModel)]="value4">
      </ng-template>
    </td>
    <td><button (click)="editCell(2)">编辑</button></td>
  </tr>
  <!-- 其他行 -->
</table>

通过上述步骤，你可以在Angular 7中捕获表格的td值，并在单击编辑按钮时将其输入到输入字段中。