【转】Ionic3在ts中获取html中值的方法
我觉得有两种方法,都是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);
}
原文出处:https://www.cnblogs.com/acm-bingzi/p/ionicParam.html
最新文章
- MUI跨域请求数据的例子:
- Java Hashtable的实现
- [课程设计]任务进度条&;开发日志目录
- Linux中的历史命令
- Chrome浏览器Network面板http请求时间分析
- 64位centos 下编译 hadoop 2.6.0 源码
- 文件上传和下载(可批量上传)——Spring(三)
- POJ2531Network Saboteur(DFS+剪枝)
- Objective-C的内存管理
- nova service-list
- ios从相册:摄像头中获取视频
- Apache Spark 2.2.0 中文文档 - 快速入门 | ApacheCN
- Windows系统下搭建Git本地代码库
- C# SQLite数据库
- Prime Path--POJ3126(bfs)
- 如何安装多个jdk
- 大同世界的Java 和.NET 开发
- [数据库] - org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection
- [翻译] SvpplyTable
- 王者荣耀交流协会第三次Scrum立会
热门文章
- 基于设备树的TQ2440 DMA学习(4)—— client驱动
- ASP.NET MVC下实现前端视图页的Session
- 项目从.NET 4.5迁移到.NET 4.0遇到的问题
- Android Service总结02 service介绍
- Android按键添加和处理的方案
- Apache Tomcat 9 Installation on Linux (RHEL and clones)
- 【Elasticsearch】ES中时间查询报错:Caused by: ElasticsearchParseException[failed to parse date field [Sun Dec 31 16:00:00 UTC 2017] with format [yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis]];
- 疑犯追踪第五季/全集Person of Interest迅雷下载
- ios成长之每日一遍(day 5)
- float浮点数的四舍五入