上点击表格单元格角2使其可编辑

Question

我有一个ngFor行和我什么时，我的一些细胞点击使其可编辑

<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); 
    } 

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

Answer 1

做到这一点这里有一个解决方案，它的工作原理。它可能不漂亮，但它的工作原理。

你的表结构更改为这样的事情：

<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为新行，像这样：

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

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

这里的工作plunker

Answer 2

好吧，首先，您将为每个invoice添加一个更多属性，名称为editable: false，然后当循环显示列表时，您将像这样绑定数据;

[contenteditable]="invoice.editable" 

所有td

<td (input)="onRowClick($event, invoice.rowId)"> 
    <div [contenteditable]="invoice.editable ? 'true': 'false'">{{ invoice.rowName }}</div> 
</td>