Angular2 表模型与文本输入绑定(bind)

Question

我有一个 PrimeNG 表格，其中的单元格是可编辑的。当我编辑输入文本字段的值时，表格模型不会改变。如何使表模型绑定(bind)到输入文本？

这是我的代码:

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

自定义输入.html

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

自定义输入.ts

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

    constructor() {
    }

    ngOnInit() {
    }
}

Answer 1

您需要将值发送给您的父级，父级不会自动收到更改通知。为此，您需要使用 Output。

所以在你的 child 身上，这样做:

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

当输入发生变化时我们调用方法的地方。然后该方法将更改发送给父级。

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

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

对于双向绑定(bind)，我们使用与声明为 Input 时相同的 inputModel，但只需添加后缀 Change，这意味着父项和子项中的值将匹配。

这是一个有效的 plunker