Question

我一直在角度（版本5.2）工作了几个月，感觉好像我必须遗漏一些相当明显的东西。我的问题是我需要对视图和模型之间的数据进行操作。

例如，我正在构建一个与Microsoft项目交互的简化应用程序。最终用户只需输入每个任务的开始和结束日期。根据我的组件中存在的一些其他因素，它可以直接更新模型的开始/结束日期（+ - 额外天数）或更改该任务中的另一个变量。所以使用

<input type="date" [(task.startDate)] />

并不合适。我的解决方案是使用像

这样的东西

<input type="date" (change)="processTheDate($event.value, task)" [value]="task.startDate" >


private processTheDate(value: Date, task: Task){

     //do some proccessing

     //set the value
     task.startDate = value;
}

从我在网上看到的不是preferred solution

我的问题实际上是双重的。

1。篡夺角度数据绑定有什么问题，比如我的例子？

2。什么是更好的选择？

Answer 1

没有任何内在错误（除了从视图中调用私有方法）。但大多数情况下，表单用于收集信息，然后在提交时对其执行操作。因此，简单地将表单控件绑定到模型是有意义的。
有几种选择：
- 您可以使用基于模板的表单（即ngModel），并且除了将字段简单地绑定到task.startDate之外，还可以使用(ngModelChange)来对模型更改做出反应，并且从而处理日期。或者你可以使用setter而不是public字段，从而在setter内部完成工作
- 您可以使用被动表单，并订阅FormControl的valueChanges observable，以便在每次更改值时收到通知，从而处理日期。

Answer 2

我没有发现您的解决方案有任何问题。

我认为使用ngModel通常更适合双向绑定，因为您不必编写多次同步值的代码。但是，如果您需要在值更新时执行大量逻辑，则可以使用change。

你也可以混合它们，以防你想在保持双向绑定的同时在值发生变化时做一些逻辑。

<input type="date" (change)="onStartDateChange($event.value, task)" 
       [(ngModel)]="task.startDate" >

onStartDateChange(value: Date, task: Task){

     //do some proccessing

     //set the value
     task.startDate = value;
}

如何以角度处理视图和模型之间的输入数据

2 个答案: