Angular 2 - edit row rows in row, then save new data

Question

I am trying to create a component that shows data in rows from a TableData model,

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

I have my data in this component,

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

Then in my component, I create a table like this,

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

I can edit the data since I marked the <td> element as "contenteditable", but I don’t know how to save it or get updated values. I checked the "event" data passed to the onRowClick method, but could not get the "id" of the string (it is empty. Event.srcElement.id or event.target.id are both empty).

In short, I want to edit the table and see how it updates the tableData variable. Sorry for not asking him for the first time.

Any guidance on solving my problem is welcome!

Answer 1

Juts passes id as a flag along with your id, and then discovers that on id by clicking on a table row, here is an example -

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

• PS - here you are mistaken here.

  <tr *ngFor="#row of tableData>

should be changed with

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

working demo here plunger example

Update - Try using event binding (input) on td and get updated text using event.target.outerText . check plnukr update.

 <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

I was looking for the answer to the same question. First off, I'm here. Later I found a great article with the answer you were looking for.

Updated: I have udpated plunk, as well as directory code up to the latest version of angular

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