html – 单击表格单元格上的Angular 2使其可编辑

概述我有一个ngFor for rows和我点击某些单元格以使其可编辑 <tr *ngFor="let invoice of invoiceItem.rows"> <td contenteditable='true' (input)="onRowClick($event, invoice.rowId)">{{ invoice.rowName }}</td> <td>{{ invoice 我有一个ngFor for rows和我点击某些单元格以使其可编辑

<tr *ngFor="let invoice of invoiceItem.rows">    <td contenteditable='true' (input)="onRowClick($event,invoice.rowID)">{{ invoice.rowname }}</td>    <td>{{ invoice.hours}}</td>    <td>{{ invoice.price }}</td>    <td>{{ invoice.comments }}</td>    <td>{{ invoice.total}} </td></tr>

更多的是我添加了新行来支持它

<button (click)='addRow()'>Add a row</button> addRow() {        this.invoiceItem.rows.push({            invoiceDetailsID: this.invoiceItem.item.invoiceID,rowname: '',hours: 0,price: 0,comments: '',total: 0,rowID:         })     }    onRowClick(event,ID) {        console.log(event.target.outerText,ID);    }

我应该为这项任务实施什么？

解决方法 这是一个有效的解决方案.它可能不漂亮,但它的工作原理.

将表结构更改为以下内容：

<tr *ngFor="let invoice of invoiceItem.rows">    <td *ngIf="invoice.rowID == editRowID">        <input type="text" [(ngModel)]="invoice.hours">    </td>    <td *ngIf="invoice.rowID !== editRowID" (click)="toggle(invoice.rowID)">       {{invoice.rowID}}    </td>    <!-- the rest of your fIElds in same manner --></tr>

在您的组件中：

editRowID: any;toggle(ID){  this.editRowID = ID;}

这也支持添加新行.我想出了一个用于为新行设置ID的Hack,如下所示：

addRow() {  let indexForID = this.invoiceItem.rows.length + 1  this.rows.push({    // .....    rowID: indexForID,})}

你可能会找到一个更好的方法:)

这是一个工作plunker

总结

以上是内存溢出为你收集整理的html – 单击表格单元格上的Angular 2使其可编辑全部内容，希望文章能够帮你解决html – 单击表格单元格上的Angular 2使其可编辑所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。