在使用 Angular2 开发 Web 应用程序时，可能会遇到数据无法提交的问题。这个问题可能由许多因素引起，例如不正确的表单验证、网络连接故障等等。在本文中，我们将探讨一些常见的数据提交问题，并提供一些解决方法。
数据提交问题及其解决办法
问题1：表单验证错误
如果表单验证未通过，Angular2 会防止表单数据提交。因此，您必须首先确保表单验证正确。这通常涉及重新调整表单控件的验证规则和错误消息。下面是一段示例代码：
-- -------------------- ---- -------
----- -------------------- ------------------------
---- -------------------
------ -------------------------------
------ ------------- ----------- -------------------------- -------------------- --
---- ------------------------------------------------
------ ----- ---- ---------
------
------
------- ------------- ------------------------------------------
-------在上面的代码中，我们使用 Angular2 提供的表单组件实现了一个表单，并设置了一个名为 myForm 的表单组。表单中有一个 username 输入框，当未输入时，若要验证用户名为必填项。我们还设置了 Submit 按钮，只有当表单验证通过时，该按钮才会生效。
问题2：出现网络连接故障
如果表单验证通过，但数据提交后遇到网络故障，您可以使用 Angular2 的 Http 服务和 toPromise 方法。下面是一段示例代码：
-- -------------------- ---- -------
------ - ---- - ---- ----------------
------ - ---------- - ---- ----------------
------ ------------------------------
-------------
------ ----- --------- -
------------------- ----- ----- --
------------ ----- ------------ -
----- --- - --------------
------ ------------------- -----
------------
-------------- -- ----------------
------------- -- -------------------------------
-
-在上面的代码中，我们创建了一个名为 MyService 的服务，该服务使用了 Angular2 提供的 Http 服务和 toPromise 方法。该服务中还添加了 create 方法，该方法用于向服务器发送一个 HTTP POST 请求，用于创建一个新的数据。如果请求成功，我们会将响应转换为 JSON 格式。如果请求失败，我们会将错误信息作为 Promise 的拒绝原因。
在组件中使用该服务：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- ---------
--------- -
----- ----------------------
---- -------------------
------ ------------------------
------ ----------- ----------- ------------------ --
------
------- -----------------------------
-------
--
---------- -----------
--
------ ----- ------------ -
---- - ---
------------------- ---------- ---------- --
----------- ---- -
----- ---- - - ----- --------- --
---------------------------
-------------- -- ----------------------
------------- -- -----------------------
-
-在上面的代码中，我们编写了一个小组件，该组件具有一个输入框和一个提交按钮。当用户单击“提交”按钮时，我们将数据传递给服务 MyService 中的 create 方法。如果该方法返回成功，则将响应输出到控制台。如果该方法返回错误，则将错误信息输出到控制台。
问题3：CORS 限制
如果您的应用程序在不同的域或端口中运行，并且服务器未启用跨来源资源共享（CORS），则可能会遇到跨域访问限制。在这种情况下，您需要在服务器上添加 CORS header。下面是一段示例代码：
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
next();
});在上面的代码中，我们使用 Express 框架实现了一个服务器（未显示完整代码）。在每个请求中，都会添加 CORS header，以允许跨域访问。
总结
在本文中，我们介绍了一些常见的数据提交问题，并提供了一些解决方法。如果您在使用 Angular2 开发时遇到了数据提交问题，请尝试使用本文中提供的方法进行解决。希望您通过此次学习，能对 Angular2 中的数据提交问题有更深刻的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65937fceeb4cecbf2d837eea