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

我已经在angular（版本5.2）中工作了几个月了，我觉得我一定错过了一些非常明显的东西。我的问题是，我需要在视图和模型之间对数据执行操作

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

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

私有进程日期（值：日期，任务：任务）{
//做一些加工
//设置值
task.startDate=值；
}

从我在网上看到的情况来看，这不是

我的问题实际上有两个方面

1。篡夺angular的数据绑定（如我的示例中）有什么问题？

2。什么是更好的选择？

没有什么本质上是错误的（除了从视图调用私有方法）。但大多数情况下，表单用于收集信息，然后在提交时对其进行处理。因此，简单地将表单控件绑定到模型是有意义的

有几种选择：

• 您可以使用基于模板的表单（即

  ngModel

  ），除了简单地将字段绑定到

  task.startDate

  ，还可以使用

  （ngModelChange）

  对模型更改做出反应，从而处理日期。或者可以使用setter而不是公共字段，从而从setter内部完成工作
• 您可以使用反应式表单，并订阅FormControl的

  valueChanges

  可观察项，以便在每次值更改时收到通知，从而从中处理日期

---

我看你的解决方案没有任何问题

我认为使用

ngModel

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

change

完全可以

您还可以混合使用它们，以防在值更改时执行某些逻辑时要保持双向绑定

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

---

我还应该指出，我的示例非常简单，用于解释我的问题。这是一个在角度发展过程中多次出现的问题。谢谢你的回答，很高兴看到我没有对奇怪的事情做任何事情。我确实玩过一些被动表单，但我发现它们有点复杂和不灵活（这是我刚开始的时候，所以我可能会重新访问它们）。另外，从视图访问私有方法有什么错？它工作得很好，所以我假设视图有点像组件的一个成员，因此允许访问它。它在JIT模式下工作得很好。一旦您将使用--prod标志（或者仅仅是-aot标志）为生产构建，它就不再需要了。视图是组件的客户端：它访问其字段。AOT编译器将视图编译为TypeScript类。TypeScript类可能无法访问另一个类的私有字段。啊，是的，这是有意义的。我想我可能需要重新配置一些东西来获得一个正常的生产构建。aot比jit快多少，我一直在运行实时测试（没有prod），到目前为止已经有了相当好的加载时间。我已经将angular直接集成到我的后端（MVC 5）中，并且所有的测试都会立即增加。这看起来是一种不好的做法，因此我可能需要将角度部分重新构造为自己的项目>>使用prod构建>>将静态文件插入MVC后端感谢您的回复。就像JB Nizet的回答一样，双向绑定和更改事件可能更整洁一些。从性能角度看，如果它是用一个绑定完成的，那么有什么想法吗？我认为从性能角度看，它们非常相似。ngModel针对双向绑定进行了优化，但支持许多不同的场景。如果你想深入研究，你可以在这里阅读ngModel的源代码：。我同意，在我的经验中，它们看起来非常相似。

onStartDateChange(value: Date, task: Task){

     //do some proccessing

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