Угловое 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> 

более

над I, что поддерживать его с новыми рядами добавил

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

Это также поддерживает добавление новой строки. Я пришел с хака для установки идентификатора для новой строки, например:

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

Вы могли бы найти лучший способ :)

Вот рабочий plunker

Answer 2

ОК, сначала вы добавите еще 1 свойство для каждого invoice под названием editable: false, а затем, перейдя по списку, вы будете привязывать данные следующим образом;

[contenteditable]="invoice.editable" 

сделать это для всех td

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