Угловая таблица привязки таблицы с текстовым вводом

Question

У меня есть таблица PrimeNG, ячейки которой доступны для редактирования. Когда я редактирую значение входного текстового поля, модель таблицы не изменяется. Как сделать привязку модели таблицы к входному тексту?

Вот мой код:

<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> 

заказ input.html

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

таможенно-input.ts

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

    constructor() { 
    } 

    ngOnInit() { 
    } 
} 

Answer 1

Вы должны излучать ценности ваших родителей, родитель не получит уведомление об изменении автоматически. Для этой цели вам необходимо использовать Output.

Так что в вашем ребенке, сделайте следующее:

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

Где мы называем метод, когда изменения сделаны на входе. Затем этот метод испускает изменение родительскому.

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

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

Для двухсторонним связывания мы используем тот же inputModel, как и в объявлены как вход, а просто добавить суффикс Change, это означает, что значения в родителя и ребенка будут согласованы.

и вот рабочий plunker

Answer 2

Вместо передачи row.value к вашему inputModel, пройти весь row вместо:

<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> 

Затем, вместо того, чтобы [(ngModel)] к inputModel в пользовательском шаблоне, установите его inputModel.value.

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

Вот Example Plunkr, иллюстрирующий, что ввод связывается с заголовком с использованием пользовательского компонента.

Причина, по которой это работает, состоит в том, что row.value, вероятно, является примитивным (например, строкой, числом или логическим), и вы не можете связывать примитивные объекты только с двумя путями. (например, var row:any = {value:"some value"}). Ваш custom-input берет на себя весь объект (row) и управляет имуществом value.