angolari 2 - Modifica tabella righe in linea, quindi salvare i nuovi dati

Question

Sto cercando di fare un componente che mostra i dati in file di modello TableData,

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

ho i miei dati nel componente come questo,

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

Poi nella mia componente, sto creando una tabella come questa,

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

sono in grado di modificare i dati come Ho contrassegnato l'elemento <td> come "contenteditable", ma non so come salvarlo o recuperare i valori aggiornati. Ho ispezionato i dati "evento" passati al metodo onRowClick, ma non è stato possibile recuperare l''id' della riga (è vuoto. Event.srcElement.id o event.target.id sono entrambi vuoti).

In breve, voglio modificare la tabella e vederla aggiornare la variabile tableData. Scusa per non averlo chiesto chiaramente la prima volta.

Qualsiasi consiglio su come risolvere il mio problema è molto apprezzato!

Answer 1

Juts passare id come bandiera insieme con il tuo ID poi rilevare come da id cliccato sul riga della tabella qui è esempio -

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

• PS - il codice sta gettando errore qui per favore correggere qui.

  <tr *ngFor="#row of tableData>

dovrebbe essere cambiato con

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

lavorare demo qui Plunker example

Update - Prova utilizzando (input) evento vincolante per il td e GE t il testo aggiornato utilizzando event.target.outerText. si prega di verificare l'aggiornamento 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

Stavo cercando una risposta alla stessa domanda. Primo, sono arrivato qui. Successivamente, ho trovato un articolo incredibile con la risposta che stavi cercando.

Aggiornamento: Ho udpated buttare così come il codice direttiva per ultimo verstion della direttiva angolare

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