4

我有一个 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>

自定义输入.html

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

自定义输入.ts

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

    constructor() {
    }

    ngOnInit() {
    }
}
4

2 回答 2

0

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

所以在你的孩子身上，这样做：

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

当对输入进行更改时，我们调用方法。然后该方法将更改发送给父级。

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

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

对于双向绑定，我们使用与inputModel声明为 Input 相同的方式，但只需添加后缀Change，这意味着将匹配 parent 和 child 中的值。

这是一个工作的笨蛋

于 2017-01-31T08:14:15.817 回答
0

而不是传递row.value给 your 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)]为，而是将其设置为.inputModelinputModel.value

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

这是一个示例 Stackblitz，说明输入使用自定义组件绑定到标题。

之所以可行，是因为row.value它可能是一个基元（例如字符串、数字或布尔值），并且您不能双向绑定一个基元，只有对象。（例如。var row:any = {value:"some value"}）。你custom-input接受整个对象（row），并操纵value它的属性。

编辑：

删除了Example Plunkr，因为该示例未加载。而是在 Stackblitz 中添加了新示例。

于 2017-01-31T08:20:23.327 回答