在 Angular 4 开发过程中，经常会遇到这样的错误提示：“Can't bind to 'ngModel' since it isn't a known property”。这种错误提示可能会让人感到困扰，不知道该如何解决。本文将详细介绍这种错误的产生原因，并提供解决方案。
问题产生原因
在 Angular 4 中，我们使用双向绑定实现视图与数据的同步。双向绑定需要使用到 ngModel 指令。但是有时候，在使用 ngModel 时，会出现“Can't bind to 'ngModel' since it isn't a known property”的错误提示。
这个错误提示的原因是，Angular 4 不能自动识别 ngModel 指令。为了使用 ngModel 指令，我们需要在相应的模块中导入 FormsModule。
解决方案
要解决这个问题，我们可以按照以下步骤进行：
打开相应的组件文件（通常是 xxx.component.ts 文件）。
在文件开头导入 FormsModule，如下所示：
import { FormsModule } from '@angular/forms';- 在 @NgModule 的 imports 数组中添加 FormsModule，如下所示：
-- -------------------- ---- -------
-----------
------------- -
------------
--
-------- -
--------------
-----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -- 在模板中使用 ngModel 指令。
<input [(ngModel)]="name" />
示例代码
下面是一个简单的示例代码，使用了 ngModel 指令来实现输入框与组件中的 name 变量的双向绑定。
app.component.ts 文件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------- --------------
------ ------------------ --
-
--
------ ----- ------------ -
---- - -------- ---
-app.module.ts 文件：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在使用 ngModel 指令时，一定要记得导入 FormsModule，不然就会产生错误提示。
总结
本文介绍了 Angular 4 中的一个常见错误：“Can't bind to 'ngModel' since it isn't a known property”，并提供了解决方案。在使用 ngModel 指令时，我们需要在相应的模块中导入 FormsModule 才能正常使用。希望本文能够帮助读者解决类似的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649236c948841e989400bf0d