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

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

这是一个有效的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 Stackblitz，说明输入使用自定义组件绑定到标题。

这样做的原因是因为row.value可能是一个原语（例如字符串，数字或布尔值），并且您不能双向绑定基元，只能绑定对象。（例如var row:any = {value:"some value"}）。您的custom-input接收整个对象（row），并操纵其上的value属性。

修改

删除 ~~Example Plunkr~~ ，因为示例未加载。在Stackblitz中添加了新的示例。

Angular2表模型与文本输入绑定

2 个答案: