Question

我有一个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);
    }

我应该为此任务实施什么？

Answer 1

这是一个有效的解决方案。它可能不太漂亮，但它确实有效。

将表格结构更改为：

find_element_by_css_selector

在你的组件中：

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

这也支持添加新行。我想出了一个用于为新行设置id的hack，如下所示：

editRowId: any;

toggle(id){
  this.editRowId = id;
}

您可能会找到更好的方法：）

这是一个有效的 plunker

Answer 2

好的，首先你要为每个名为invoice的{{1}}添加1个属性，然后在循环遍历列表时，你将绑定这样的数据;

editable: false

为所有[contenteditable]="invoice.editable"

执行此操作

td

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

2 个答案: