如何使用 javascript 使用 Angular 2 http post 函数提交表单?

2024-03-29

我已经开始学习了Angular2但我想使用提交表格http.post()到我的 Web API,但我不能。


在您的组件中,您只需在submit事件并利用http对象来执行 HTTP 请求。该对象先前已注入到组件的构造函数中。

var Cmp = ng.core.
  Component({
    selector: 'cmp'
    template: `
      <form (submit)="submitForm()">
        <input [(ngModel)]="element.name"/>

        <button type="submit">Submit the form</button>
      </form>
    `
  }).
  Class({
    constructor: [ ng.http.Http, function(http) {
      this.http = http;
    }],

    submitForm: function() {
      var headers = new ng.http.Headers();
      headers.append('Content-Type', 'application/json');

      this.http.post('http://...', JSON.stringify(this.element), {
        headers: headers
      }).subscribe(function(data) {
        console.log('received response');
      });
    }
  });

您需要添加HTTP_PROVIDERS引导您的应用程序时:

document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp, [ ng.http.HTTP_PROVIDERS]);
});

这是相应的 plunker:https://plnkr.co/edit/Fl2pbKxBSWFOakgIFKaf?p=preview https://plnkr.co/edit/Fl2pbKxBSWFOakgIFKaf?p=preview.

希望对你有帮助, 蒂埃里

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 javascript 使用 Angular 2 http post 函数提交表单? 的相关文章

  • Angular2 - 根相对导入

    我在 angular2 typescript 中导入时遇到问题 我想使用一些像 app components calendar 这样的根目录的导入 而我能够使用的唯一方法是 app views order order view ts imp
  • Angular JS - 提交到 $http 时日期发生变化 - 时区问题

    我遇到一个奇怪的问题Date当它通过 http put 传递到 API 时发生变化 我怀疑时区问题 Datepicker 触发 ng change 事件 console log Tue Jun 10 2014 00 00 00 GMT 01
  • 在网页上写乐谱[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我希望能够在网页中编写乐谱和和弦 有没有可用的库 例如用于数学的 Mathjax 如果没有 那么还有其
  • 使用 Intern 测试自定义 JavaScript(不是 Node 模块)

    是否可以为自定义客户端创建和运行测试套件 JavaScript 不是作为 Node 模块创建的 应该如何 那么配置要改吗 Intern 配置中有 loader 部分 指定了 如果我做对了 将会加载的包 是否有必要 以某种方式在这里包含我的自
  • 检查复选框是否被选中? [复制]

    这个问题在这里已经有答案了 如何通过 jQuery 检查复选框是否被选中 我可以只向元素添加 ID 或类并执行此操作吗 if element val 1 do stuff if element is checked checkbox is
  • javascript - 动态变量

    您好 我正在尝试创建动态变量 但它说 变量 v0 到 v5 未定义 td each function i eval var v i this html 任何帮助将不胜感激 这听起来是个坏主意 你有什么理由不能这样做吗 var tdHtml
  • JavaScript 对象镜像/单向属性同步

    出于安全目的 我需要一个 镜像 对象 也就是说 如果我创建对象 A 并浅克隆 A 的副本并将其称为 B 则每当 A 的属性发生更改时 我希望 B 自动更新自身以反映更改 但反之则不然 换句话说 单向属性同步 我的问题 是否已经存在我不知道的
  • 如何在 Angular 4 中获取 HTTP 请求标头?

    在互联网上 我只看到向 HTTP 请求添加参数 如下所示 this headers append Content Type application json this headers append Accept application js
  • Antd 选择搜索框未呈现匹配项

    我有产品数据 我正在使用搜索值过滤数据 然后使用过滤后的数据呈现选项 产品数据作为道具来自全局 redux 存储 由于某种原因 下拉列表仅在搜索值为空时显示数据 当我开始输入时 filteredData已更新 组件也重新渲染 但选项不显示任
  • 什么是闭包编译器?

    如果您不知道我在说什么 请查看以下内容 http closure compiler appspot com home http closure compiler appspot com home 这是一个 JavaScript 压缩器 在他
  • 防止 Bootstrap IE 下拉列表在滚动条单击时关闭

    在 IE 中 单击下拉菜单滚动条时 下拉菜单将关闭 当您使用鼠标滚轮滚动它时 效果很好 这是代码层链接 https www codeply com go Uh8qadr3q2 https www codeply com go Uh8qadr
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo
  • JQuery 屏蔽输入插件不起作用

    我已将 JQuery Masked 输入插件添加到我的 Web 项目中 但它根本不起作用 该插件可以在这里找到 http digitalbush com projects masked input plugin http digitalbu
  • 如何使用 Javascript 从 Chrome iOS 下载 blob 文件?

    如何使用 Javascript 从 Chrome iOS 下载 blob 文件 我正在从 iOS 下载文件 pdf excel txt png iOS 没有文件系统 这对下载来说是一个问题 我创建了一个代码 根据操作系统和导航器 如果需要
  • html 下钻下拉所选值未插入 MYSQL

    我有两个下拉列表 首先从数据库下拉填充 根据第一个下拉列表的选定值从数据库填充第二个下拉列表 document ready function c change function var c1 c selected text if c1 aj
  • RemoveEventListener 在 Firefox 版本 58 中不起作用

    但它在 Chrome 中有效 这是我的 UI EventBus 代码 原型 addEventListener方法是一样的 只不过remove换成了add UI EventBus removeEventListener function ob
  • 在javascript中我们如何识别一个对象是Hash还是Array?

    我的 JSON 调用的输出可以是数组或哈希 我如何区分这两者 现代浏览器支持Array isArray obj method See MDN https developer mozilla org en US docs Web JavaSc
  • IE 中带有“删除”方法的 jQuery.ajax 问题

    我有一个页面 用户可以使用按钮编辑各种内容并选择触发 ajax 调用 特别是 一个操作会导致远程调用一个 url 其中包含一些数据和 放置 请求 这 因为我使用的是宁静的 Rails 后端 会触发我的更新操作 我还有一个删除按钮 它调用相同
  • 类型错误:无法读取未定义的属性“长度” - 使用安全帽部署时

    我在尝试在安全帽开发链上部署模拟合约时收到以下错误 我正在关注 使用 JavaScript 学习区块链 Solidity 和全栈 Web3 开发 Patrick Collins 在 FreeCodeCamp YT 频道上的 32 小时课程
  • 如果列表在初始化之前为空,则 jQuery 可排序无法与水平列表正常工作

    如果我在初始化后将元素添加到列表中 sortable它无法正常工作 参见示例jsFiddle http jsfiddle net NQMPr 1 示例 HTML div class container div br

随机推荐

  • 如何拒绝所有用户删除表

    在 SQL Server 2005 中 有没有一种方法可以使用单个语句来拒绝删除行 在数据库所有用户的特定表中 尝试这个 CREATE TRIGGER yourTriggerName ON YourTableName INSTEAD OF
  • Spark 驱动程序不会因异常而崩溃

    我们在 Kubernetes 上以客户端模式运行 Spark 3 1 1 我们是一个简单的 scala Spark 应用程序 它从 S3 加载 parquet 文件并聚合它们 sparkSession read parquet paths
  • 如何禁用 TensorFlow 的急切执行?

    我正在尝试学习 TensorFlow 目前 我正在使用占位符 当我尝试创建占位符时 出现错误 RuntimeError tf placeholder is not compatible with eager execution 这是有道理的
  • Android SQLite数据库查询排序顺序

    我的数据库中有这样的数据 Alice anderson Beatrice benny Carmen calzone 使用此代码 mDb query DATABASE NAMES TABLE new String KEY ROWID KEY
  • 如何使用 Opencv 存储大量图像的分层 K 均值树?

    我正在尝试制作一个程序 可以从图像数据集中找到相似的图像 步骤是 提取所有图像的 SURF 描述符 存储描述符 对存储的描述符应用 knn 使用 kNN 将存储的描述符与查询图像描述符进行匹配 现在每个图像 SURF 描述符将存储为分层 k
  • R Markdown 中未定义 Tex Proof 环境,生成的 Tex 文件中未定义 amsthm

    编辑以提供更多信息 我正在使用以下 R markdown 文件来生成以下 Tex 文件 我在 rmd 标头中包含 amsthm 它生成一个没有 amsthm 的 Tex 文件 因此 在编译期间并未定义证明环境 这是我的 rmd 文件 tit
  • Android 按钮文字外观

    我可以通过在对象内设置按钮文本外观来更改按钮文本外观 如下所示
  • javax.xml.ws.WebServiceException:找不到端口 {http://tempuri.org/}WSHttpBinding_IDWService

    我正在尝试使用 java 中的 web 服务 使用从 wsdl2java 的 wsdl 文件生成的客户端 我使用的是 Eclipse 版本 Helios 和 jdk 1 6 0 20 并且我使用 wsld2java 生成了 class 文件
  • jQuery 的 getScript 和本地文件系统——限制/替代方案?

    现在我正在开发一个基于本地文件系统的帮助系统 它旨在随不在支持互联网的计算机上使用的产品一起提供 因此它必须是一个独立的网页 不依赖于 Web 服务器 这带来了一些挑战 也就是说 文件所在的目录结构需要 上下 导航才能访问显示帮助系统所需的
  • 使 eternicode datepicker 在点击时打开,而不是焦点打开

    The eternicode Twitter 引导程序日期选择器 https github com eternicode bootstrap datepicker一旦出现
  • Gunicorn 的 gthread 异步工作线程是否类似于 Waitress?

    我读过 2013 年的一些帖子 Gunicorn 团队计划构建一个线程缓冲层工作模型 类似于 Waitress 的工作方式 这就是 gthread 异步工作线程的作用吗 gthread worker 于 2014 年发布了 19 0 版本
  • PHP & MySQL 如何显示数据库中的类别和子类别

    我想知道如何使用 PHP 和 MySQL 显示我的分层数据来创建我的类别和无尽的子类别 一个关于我的 PHP 和 MySQL 代码应该是什么样子的快速示例将会有很大帮助 MySQL 表类别结构 id parent id category 1
  • JTable 未显示在 JFrame (Java) 上

    我遇到了一个问题JFrame没有显示JTable添加到其中 我试过了getContentPane add 我已改为仅添加以使代码更短一些 任何帮助都非常感激 package com embah Accgui import java awt
  • Lisp 当前内存使用情况

    我需要从 Common Lisp 程序中找出当前使用了多少内存 我知道没有可移植的方法 标准函数room以文本形式将信息打印到标准输出 而不是将其作为值返回 但是sb kernel dynamic usage在 SBCL 工作 其他 Com
  • 使用Python从pdf中提取图像

    我们如何从PDF中提取图像 仅图像 我使用了很多在线工具 它们都不是通用的 在大多数 PDF 中 它使用整个图像的屏幕截图而不是图像 PDF链接 gt sg inflibnet ac in 8080 jspui bitstream 1060
  • BigQuery 使用条件从其他表创建表(管理大量列)

    我面临与我的项目相关的问题 这是我想做的事情的摘要 我有一个很大的每日文件 100 Go 其中包含以下摘录 无标题 ID A segment 1 ID A segment 2 ID B segment 2 ID B segment 3 ID
  • 带选择输入的 Vue v 模型

    我试图将选择输入中的任何选项设置为对象中的值 我正在尝试使用 v model 来达到此目的 但我不太确定如何使用 以下是我迄今为止尝试做的事情 div class select wrapper div
  • 如何在 IronPython 中使用 C# 对象的特定接口

    我有一个实现 2 个 IEnumerable 接口的 C 类 如何从 IronPython 访问任一界面 我的课 public class MyClass IEnumerable
  • IIS7 分析

    有没有办法分析 IIS7 免费软件 连接数 带宽使用情况 错误 事件查看器 谢谢 利文 卡登 ps 类似于 mssqlserver 分析 没有什么比 MSSQL 的分析器更好的了 而是一组工具 Perfmon 将向您显示每个网站的当前连接数
  • 如何使用 javascript 使用 Angular 2 http post 函数提交表单?

    我已经开始学习了Angular2但我想使用提交表格http post 到我的 Web API 但我不能 在您的组件中 您只需在submit事件并利用http对象来执行 HTTP 请求 该对象先前已注入到组件的构造函数中 var Cmp ng