Angular2 Tischmodell Bindung mit Texteingabe

Question

Ich habe eine PrimeNG-Tabelle, die Zellen editierbar sind. Wenn ich den Wert des Eingabetextfeldes editiere, ändert sich das Tabellenmodell nicht. Wie mache ich das Tabellenmodell an den Eingabetext binden?

Hier ist mein Code:

<p-dataTable [value]="data" [editable]="true"> 
    <p-column> 
     <template pTemplate type="body" let-row="rowData"> 
      <custom-input [(inputModel)]="row.value"></custom-input> 
     </template> 
    </p-column> 
</p-dataTable> 

custom-input.html

<input #inputText pInputText type="text" [(ngModel)]="inputModel" /> 

custom-input.ts

export class ValidationInputComponent implements OnInit { 
    @Input() inputModel: Object; 

    constructor() { 
    } 

    ngOnInit() { 
    } 
} 

Answer 1

Sie müssen die Werte Ihrer Eltern emittieren, Das übergeordnete Element wird die Benachrichtigung für die Änderung nicht automatisch erhalten. Sie müssen Output für diesen Zweck verwenden.

Also in Ihrem Kind, dies zu tun:

<input pInputText type="text" [(ngModel)]="inputModel" (ngModelChange)="emitChange()" /> 

Wo wir eine Methode aufrufen, wenn Änderungen am Eingang vorgenommen werden. Diese Methode gibt dann die Änderung an das Elternelement aus.

@Output() inputModelChange: EventEmitter<any> = new EventEmitter<any>(); 

emitChange() { 
    this.inputModelChange.emit(this.inputModel) 
} 

Zwei-Wege-Bindung wir die gleiche inputModel wie in deklariert als Input verwenden, aber fügen Sie einfach das Suffix Change, bedeutet dies, dass die Werte in Eltern- und Kind angepasst werden.

und hier ist ein Arbeits plunker

Answer 2

Statt row.value auf Ihre inputModel von vorbei, passieren die ganze row statt:

<p-dataTable [value]="data" [editable]="true"> 
    <p-column> 
     <template pTemplate type="body" let-row="rowData"> 
      <custom-input [(inputModel)]="row"></custom-input> 
     </template> 
    </p-column> 
</p-dataTable> 

Dann statt [(ngModel)]-inputModel in Ihrer benutzerdefinierten Vorlage setzen, setzen Sie ihn auf inputModel.value.

<input #inputText pInputText type="text" [(ngModel)]="inputModel.value" /> 

Hier ist ein Example Plunkr darstellen, dass der Eingang in der Titelkomponente mit einer benutzerdefinierten bindet.

Der Grund, warum dies funktioniert, ist, row.value ist wahrscheinlich ein primitives (z. B. Zeichenfolge, Zahl oder boolean), und Sie können ein primitiv, nur Objekte nicht bidirektional binden. (zB var row:any = {value:"some value"}). Ihr custom-input übernimmt das gesamte Objekt (row) und bearbeitet die Eigenschaft value darauf.