上點擊表格單元格角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>