Angular 2 - 编辑表内联行,然后保存新数据

Question

我正在尝试创建一个显示TableData模型行数据的组件,

export class TableData{
    constructor(
        public id: number,
        public country: string,
        public capital: string){ }
}

我在这个组件中有我的数据,

tableData: TableData[] = [
        new TableData(1, 'Canada','Ottawa'),
        new TableData(2, 'USA','Washington DC'),
        new TableData(3, 'Australia','Canberra'),
        new TableData(4, 'UK','London')
        ];

然后在我的组件中,我正在创建一个这样的表,

<table>
  <tbody>
     <tr *ngFor="#row of tableData>
        <td contenteditable='true'>{{ row.id }}</td>
        <td contenteditable='true' (click)="onRowClick($event)">{{ row.country }}</td>
        <td contenteditable='true'>{{ row.capital }}</td>
     </tr>
 </tbody>
<span>{{ tableData | json }}</span>
</table>

onRowClick(event){
console.log(event);
}

我能够编辑数据,因为我将<td>元素标记为'contenteditable',但不知道如何保存或检索更新的值.我检查了传递给onRowClick方法的'event'数据,但是无法检索row的'id'(它是空的.event.srcElement.id或event.target.id都是空的).

简而言之,我想编辑表并看到它更新tableData变量.很抱歉没有第一次清楚地问清楚.

任何关于如何解决我的问题的指导非常感谢!

Answer 1

Juts传递id为标志和你的id然后检测按照id点击表格的行在这里是示例 -

tableData: TableData[] = [
        new TableData('Canada','Ottawa',1),
        new TableData('USA','Washington DC',2),
        new TableData('Australia','Canberra',3),
        new TableData('UK','London',4)
        ];

• PS - 你的代码在这里抛出错误,请在这里更正.

  <tr *ngFor="#row of tableData>

应该改变

<tr *ngFor="#row of tableData">

在这里工作演示 Plunker example

更新 - 尝试使用(input)事件绑定td并使用获取更新的文本event.target.outerText.请检查更新plnukr.

<tr *ngFor="#row of tableData">
  <td contenteditable='true' (input)="onRowClick($event, row.id)">{{ row.country }}</td>
  <td contenteditable='true'>{{ row.capital }}</td>
</tr>

onRowClick(event, id){
    console.log(event.target.outerText, id);
  }

Answer 2

我正在寻找同一问题的答案。首先，我到了这里。后来，我找到了惊人的文章，其中包含您正在寻找的答案。

更新：我已将 plunk 以及指令代码更新为最新版本的 angular

指令：contenteditableModel

<span contenteditable [(contenteditableModel)]="text"></span>

https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/

https://plnkr.co/edit/SRLYoX5chNYJIpZ4iqsG?p=preview

import {
    Directive,
    ElementRef,
    Input,
    Output,
    OnChanges,
    EventEmitter,
    HostListener,
    SimpleChanges
} from '@angular/core';

/**
 * 
 */
@Directive({
    selector: '[contenteditableModel]'
})
export class ContenteditableModelDirective implements OnChanges {

    @Input('contenteditableModel')
    public model: any;

    @Output('contenteditableModelChange')
    public update = new EventEmitter();

    private _lastViewModel: any;

    constructor(private elRef: ElementRef) {}

    public ngOnChanges(changes: SimpleChanges): void {
        if(this._lastViewModel !== changes['model'].currentValue){
            this._lastViewModel = this.model;
            this._refreshView();
        }
    }

    @HostListener('blur')
    public onBlur() {
        var value = this.elRef.nativeElement.innerText;
        this._lastViewModel = value;
        this.update.emit(value);
    }

    private _refreshView() {
        this.elRef.nativeElement.innerText = this.model;
    }
}