在Angular 7中捕获表格的td
值,并在单击编辑按钮时将其输入到输入字段中,可以按照以下步骤进行:
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>
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;
}
}
<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
值,并在单击编辑按钮时将其输入到输入字段中。
领取专属 10元无门槛券
手把手带您无忧上云