Angular 8 中的双向数据绑定

我们已经看到，在单向数据绑定中，模板（视图）中的任何更改都不会反映在组件 TypeScript 代码中。 为了解决这个问题，Angular 提供了双向数据绑定。 双向绑定具有更新从组件到视图以及反之的数据的功能。

在双向数据绑定中，模型和视图之间会发生数据的自动同步。 在这里，更改会反映在两个组件中。 无论何时您在模型中进行更改，它都会反映在视图中；当您在视图中进行更改时，它都会反映在模型中。

这种情况会立即自动发生，确保 HTML 模板和 TypeScript 代码始终保持更新。

在双向数据绑定中，属性绑定和事件绑定 结合在一起。

语法

注意: 对于双向数据绑定，我们必须启用 ngModel 指令。 它依赖于 angular/forms 包中的 FormsModule，因此我们必须将 FormsModule 添加到 AppModule 中的 imports[] 数组中。

让我们举个例子来更好地理解它。

打开你的项目的 app.module.ts 文件并使用以下代码

app.component.ts 文件

app.component.html 文件

现在，启动你的服务器并打开本地主机浏览器以查看结果。

输出

您可以通过更改文本框的值来检查它，并且它也会在组件中更新。

例如