Angular2表格模型与文本输入绑定

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

这里是我的代码：

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

来源

2017-01-31 myanmar

是否有你有外部custom-input.html的原因？我不知道它是否有帮助，但可以直接写''而不是引用另一个html文件。 – John

是的，你说得对。没有外部自定义组件，一切正常。但我想拥有一个自定义组件，因为它具有一些与正常输入字段不同的其他css功能。它在我的项目中经常使用。 – myanmar

*你的意思是*表模型不改变*？ :) – Alex

您需要的值发射到你的父母，家长不会自动获取更改通知。您需要为此使用Output。

因此，在你的孩子，这样做：

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

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

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

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

对于双向绑定，我们使用相同的inputModel在声明为输入，但只是添加后缀Change，这意味着，在父母与子女的值将被匹配。

，这里是一个不是传递row.value您inputModel工作plunker

来源

2017-01-31 08:14:15 Alex

缅甸，做了这个答案，或其他答案帮助？如果是这样，请考虑接受一个:) – Alex

，通过全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属性。

来源

2017-01-31 08:20:23 John

Angular2表格模型与文本输入绑定

回答

相关问题