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

我正在寻找同一个问题的答案。首先，我来到这里。后来，我找到了你正在寻找答案的精彩文章。

更新：我已将umppated plunk以及指令代码用于最新的棱角分析

指令：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;
    }
}

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

2 个答案: