首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从文本框中获取数据,并使用materials在angular 6中显示

在Angular 6中,可以通过以下步骤从文本框中获取数据并使用materials库来显示:

  1. 首先,确保已经安装了Angular CLI,并创建了一个新的Angular项目。
  2. 在项目中安装@angular/material库,可以使用以下命令:
  3. 在项目中安装@angular/material库,可以使用以下命令:
  4. app.module.ts文件中导入所需的materials模块和动画模块,并将它们添加到imports数组中:
  5. app.module.ts文件中导入所需的materials模块和动画模块,并将它们添加到imports数组中:
  6. 在组件的HTML模板中,添加一个文本框和一个按钮,并使用[(ngModel)]指令将文本框的值绑定到组件的属性上:
  7. 在组件的HTML模板中,添加一个文本框和一个按钮,并使用[(ngModel)]指令将文本框的值绑定到组件的属性上:
  8. 在组件的TypeScript文件中,定义一个属性inputData来存储文本框中的数据,并创建一个方法displayData()来在控制台中显示该数据:
  9. 在组件的TypeScript文件中,定义一个属性inputData来存储文本框中的数据,并创建一个方法displayData()来在控制台中显示该数据:

这样,当用户在文本框中输入数据并点击按钮时,displayData()方法会将数据打印到控制台中。你可以根据需要进一步处理这些数据,例如将其显示在页面的其他部分。

关于Angular 6中使用materials的更多信息和示例,你可以参考腾讯云的相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Excel表获取数据显示中国地图上

0.26% 贵州省 13 0.26% 台湾省 8 0.16% 宁夏回族自治区 7 0.14% 海南省 5 0.10% 青海省 4 0.08% 香港 2 0.04% 将用户数显示中国地图上...第一步:获取excel数据 import pandas as pd # 读取Excel文件 df= pd.read_excel('user.xlsx') 第二步:获取china-shapefiles-master...geometry'], dtype='object') 然后用下面语句遍历所有列 for c in china.columns: print(china[c].head(10)) ...第三步:合并Excel数据和地图信息,地图信息的,FCNAME列与Excel数据的省列相同,作为关键字,将NaN变为0 #合并excel文件与地图文件,将NaN变为0 merged = china.set_index...('FCNAME').join(df.set_index('省')).fillna(0) 第四步:画图,将将用户数显示中国地图上。

10010

React中使用ajax获取数据移动浏览器显示问题

在做的一个小项目,页面加载后使用ajax读取本地REST数据,保存在状态,稍后form的选择下拉框显示,代码如下: 150 componentDidMount() { 151...、火狐浏览器访问,数据都能加载,在手机端使用谷歌浏览器访问,选择下拉框始终为空,这说明手机端浏览器ajax获取数据时出了问题。...javascript$(function() {....}) 是 jQuery 的经典用法,等同于 $(document).ready(function() {....})...,即在页面加载完成后才执行某个函数,如果函数要操作 DOM,页面加载完成后再执行会更安全,所以使用 jQuery 时这样的写法很常见。...可能的原因是手机端刘览器与电脑端浏览器页面加载处理脚本时间不同,前者是未等页面加载结束即执行jquery脚本,后者则相反,所以后者不需$(function(){}也可正常显示

5.9K20
  • AngularDart4.0 英雄之旅-教程-03英雄编辑器

    显示数据”页面阅读有关插值的更多信息。 Hero对象 英雄需要更多的属性。 将英雄文字字符串转换为类。 创建一个具有id和name属性的Hero类。...数据两个方向流动:从属性到文本框文本框返回到属性。 表单和模板语法页面阅读有关ngModel的更多信息。 @Component(指令:...)...模板中使用任何Angular指令之前,需要在组件的@Component注解的指令参数列出它们。...您可以编辑英雄的名字,看到立即在文本框上方的反映的更改。...您使用Dart的模板字符串编写了多行模板,以使模板可读。 您使用内置的ngModel指令向元素添加了双向数据绑定。 此绑定显示Hero的名称,允许用户更改它。

    3.2K10

    angularjs学习第五天笔记(第二篇:表单验证升级篇)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教...第五天,昨天学习了简单的表单验证,昨天的基础上,今天主要对表单验证进一步学习研究。   ...今天主要学习一下几点:文本框失去焦点后验证、表单验证提示信息显示处理优化 第一、文本框失去焦点后验证     文本框失去焦点验证效果:文本框失去焦点后对其合法性验证     文本框失去焦点验证实现方式...:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点为false                   提示显示信息添加并列显示条件(focused)     举一个具体的练习实例...上面的表单验证的提示信息体验上不是很友好,同一个文本框有可能同时显示多个提示信息     新版本的angularjs,引入了ngMessages指令,用于更加友好的处理方式  ngmessages

    1.5K30

    angularjs学习第五天笔记(第二篇:表单验证升级篇)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教...第五天,昨天学习了简单的表单验证,昨天的基础上,今天主要对表单验证进一步学习研究。   ...今天主要学习一下几点:文本框失去焦点后验证、表单验证提示信息显示处理优化 第一、文本框失去焦点后验证     文本框失去焦点验证效果:文本框失去焦点后对其合法性验证     文本框失去焦点验证实现方式...:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点为false                   提示显示信息添加并列显示条件(focused)     举一个具体的练习实例...上面的表单验证的提示信息体验上不是很友好,同一个文本框有可能同时显示多个提示信息     新版本的angularjs,引入了ngMessages指令,用于更加友好的处理方式  ngmessages

    1.7K10

    用AngularJS来实现异步数据的购物车功能设计

    Angular,你将会使用一种叫做控制器的JavaScript类来管理页面的区域。body标签引入一个控制器,就是声明CartController将会管理介于和之间的所有内容。...完整的表达式{}将会获取循环中的当前item,然后把这个item的title属性值插入到DOM。 定义ng-model将会在输入框和item.quantity的值之间创建数据绑定关系。...函数的形参中放一个$scope就可以告诉Angular:控制器需要一个叫做$scope的东西。我们可以通过$scope把数据绑定到UI的元素上。...当然,这个例子的真实版本不可能只是在内存里面运行,它还需要与服务端进行交互正确地把数据持久化。...对于购物车的纯内存版,remove()函数可以只数组删除元素。由于ng-repeat所创建的 列表都是绑定在数据上的,所以当数组的项目消失时,这个列表将会自动收缩。

    1.5K60

    AngularJS入门心得1——directive和controller如何通信

    1.AngularJS是何方神圣   Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。...,用于值绑定) (2)JS文件,首先从模块开始,然后创建一个控制器行2~行4,再定义一个指令,主要实现的是将""替换为"{{water}}"标签显示...="纯净水"; 所以最终页面显示的是“纯净水”,主要的流程就是: a.指令,通过@实现指令与HTML页面元素关联; b.控制器又实现了与页面的联系; c.从而借助HTML页面建立起控制器与指令的联系...函数控制器中有定义,所以指令也是调用的控制器的greet函数。...(2)第一个文本框填值 ? (2)第二个文本框填值 ? (3)第三个文本框填值 ?

    1.7K60

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    WijmoJS VSCode Designer还提供了一个独立的命令,可以单独的选项卡打开设计图面,您可以在其中使用示例数据实例化控件,自定义其属性,生成可以复制到源文件Angular标记。...我们的示例,操作是单独的选项卡打开设计图面,使用 Angular标记提供的上下文,以及源文件该标记的位置。 现在单击链接以相邻选项卡打开设计器。...请注意,它显示代表“不断更新的”证券的实时样本数据“属性”窗格,请注意图表上有四个表示复杂对象的属性:axisX,axisY,dataLabel和legend。...单击设计器左侧的“源视图”图标以显示生成的Angular标记。 从那里,突出显示要复制的文本,使用快捷键(Windows上,Ctrl + C)将文本复制到剪贴板。...在这种情况下,设计器以斜体显示只读文本框的绑定。 保存操作期间保留绑定事件; 但是,设计器没有用于创建或编辑它们的界面。

    5.4K40

    前端框架AngularJS入门

    AngularJS四大特征 2.1 MVC模式 Angular遵循软件工程的MVC模式,鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular...2.3依赖注入 依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象创建时,其依赖的对象由框架来自动创建注入进来...ng-model 指令用于绑定变量,这样用户文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。...理解 $scope: $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图修改数据时会立刻更新...3.8 内置服务 我们的数据一般都是后端获取的,那么如何获取数据呢?我们一般使用内置服务$http来实现。注意:以下代码需要在tomcat运行。

    2.4K30

    ROS编程(ETH)2018更新版习题说明(三)

    首先,激光扫描获取支柱(singlepillar)的位置,然后控制机器人,使其行驶到支柱附近。 1. 修改上次练习的启动文件,以便:  a. ...文件复制到该文件夹。...注意,使用ROS参数修改控制器增益(参考讲座2,第21幻灯片), 将代码写入到激光扫描主题的回调函数。...将一个TF显示插件添加到RViz。 (参考讲座3,第7幻灯片) A: ? ? 7. 发布RViz的可视化标记,显示支柱的估计位置。 两种方式如下: (简易)将激光帧的点作为RViz标记发布。...Husky到达支柱附近[30%] 查看RViz配置(TF、机器人模型和激光扫描均正常显示)。[20%] 可视化标记正确显示RViz。[30%] --End--

    77110

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    在此页面,您将进行以下改进。 服务器获取英雄数据。 让用户添加,编辑和删除英雄的名字。 将更改保存到服务器。 您将教会应用程序对远程服务器的Web API进行相应的HTTP调用。...模拟Web API 在你有一个可以处理英雄数据请求的Web服务器之前,HTTP客户端将从模拟服务(内存的Web API)获取保存数据。...英雄数据应该模拟服务器成功加载。 HTTP Future 要获取英雄列表,您首先要对http.get()进行异步调用。 然后使用_extractData辅助方法来解码响应主体。...当应用程序使用模拟英雄列表时,更新直接应用于单个应用程序范围的共享列表的英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。...终点直道 你旅程的尽头,你已经完成了很多。 您添加了必要的依赖关系,以应用程序中使用HTTP。 您重构了HeroService以Web API加载英雄。

    11K30

    【Unity3D】自动寻路并且动态显示路线

    Unity3d实现点击目标点,然后出现引路线段,动态更新线段等功能 [这里写图片描述] 主要用到组件: NavMeshAgent [这里写图片描述] 参数就不全部说明了,就说几个重要的吧 Steering...如果目标点有碰撞体的话最后把这个值调大一点,不然会一直寻路,往这个方向挤 Path Finding->Area Mask 可以行走的区域,这个再配合 [这里写图片描述] [这里写图片描述] 这2个使用...视图中画线段 [这里写图片描述] 首先要设置一下 LineRenderer->Materials 材质要设置一下,不然会显示材质丢失,就是那个紫色的一团 LineRenderer->Parameters...20180525100642443.png] Agent Type 自动寻路的类型 Base Offset 基本偏移,碰撞几何体相对于实际几何体垂直的偏移 Speed 移动的速度,这个数值越大移动的速度越快 Angular...设置 Line Render [20180525102221795.png] 这个就介绍几个比较重要的属性吧 Materials 这个是设置线段的材质,这个不设置的话就会显示成紫色(就是材质丢失的状态

    3.3K31
    领券