Ionic3在ts中获取html中值的方法

2024-06-05 01:43:02

我觉得有两种方法，都是Angular中的语法，一种是把值当做参数传递，另一种是使用ngModel实现双向绑定

还有一种很少用到的，Js的原生方法：document.getElementById('chartContainer');

参数传递法

例子：获取input框内容

这里有个独特的地方，直接在input处使用 #定义参数的name值，注意在ts中参数的类型

在html页面中
　　<ion-input type="text" placeholder="请输入账号" #username></ion-input>
　　<ion-input type="password" placeholder="请输入密码" #password></ion-input>
　　<button (click)="login(username, password)">登录</button>

在ts文件中

　　login(username: HTMLInputElement, password: HTMLInputElement) {
　　　　console.log(username.value)
　　　　console.log(password.value)
　　}

双向绑定法

这种方法比较通用，但是需要在ts中定义对应的变量

例子1：获取input框内容

在html页面中

　　<ion-input type="text" placeholder="请输入账号" [(ngModel)]="username"></ion-input>
　　<ion-input type="password" placeholder="请输入密码" [(ngModel)]="password"></ion-input>
　　<button (click)="login()">登录</button>

在ts文件中

　　username: string;
　　password: string;
　　login() {
　　　　console.log(this.username);
　　　　console.log(this.password);
　　}

例子2：获取单选按钮的值

在html页面中
　　<ion-toggle [(ngModel)]="rememberName"></ion-toggle>

在ts文件中
　　rememberName: any;
　　login() {
　　　　console.log(this.rememberName);
　　}

原创文章，欢迎转载，转载请注明出处

Ionic3在ts中获取html中值的方法相关推荐

vue input只能输入正整数_前端开发：Vue中获取input输入框值的方法
在前端开发过程中,会用到各种各样的基础组件,一些常用的组件的使用方法一定要滚熟于心,对于刚入门的新手来说,对基础知识的熟练掌握很重要,如果不熟练就会影响开发速度.那么本篇博文就来分享一个比较基础的知识 ...
使用JavaScript在下拉列表中获取选定的值
如何使用JavaScript从下拉列表中获取选定的值? 我尝试了下面的方法,但是它们都返回选择的索引而不是值: var as = document.form1.ddlViewBy.value; var ...
GridView控件RowDataBound事件中获取列字段值的几种途径
前台: <asp:TemplateField HeaderText="充值总额|账号余额"><ItemTemplate><asp:Label ID=& ...
PHP中获取数组中单列的值
PHP中获取数组中单列的值如下: 利用PHP中的数组函数 array_column():返回数组中某个单列的值.(PHP 5.5+适用) 语法: array_column(array,column_k ...
JAVA中获取文件MD5值的四种方法
JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...
html使用thymeleaf模板时，获取数据库中字符串值，拆分为list根据下标获取对应的值的方法
1. 需求 html使用thymeleaf模板时,获取数据库中字符串值,拆分为list根据下标获取对应的值的方法 2. 方法 2.1 参考官网:https://www.thymeleaf.org/do ...
Dva中在effects中获取state的值
Dva中在effects中获取state的值首先,看官网给出effects中的例子 effects详情见 it('put multi effects in order', done => {c ...
Excel VLOOKUP实用教程之 05 vlookup如何从列表中获取最后一个值？（教程含数据excel）
实战需求 vlookup如何从列表中获取最后一个值? 文章目录 <示例 1 – 查找 Brad 的数学分数> <示例 2 – 双向查找> <示例 3 – 使用下拉列表作为 ...
html 获取文本框值,html - 如何在JavaScript中获取文本框值
html - 如何在JavaScript中获取文本框值我正在尝试使用JavaScript从HTML文本框中获取值,但值不是在空格之后例如: 我只得到:上面的"软件". 我正在使 ...
Js/Jquery获取iframe中的元素在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:win ...

最新文章

热门文章