Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Angular 2 中的绑定的方法在无限循环吗?

Angular 2 中的绑定的方法在无限循环吗?

作者头像
孙亖
发布于 2018-06-07 03:15:31
发布于 2018-06-07 03:15:31
4.2K00
代码可运行
举报
文章被收录于专栏:编程直播室编程直播室
运行总次数:0
代码可运行

我在自己的Ionic 2项目中,使用卡片列出数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<ion-card *ngFor="let item of inspects">

卡片中有一个导航按钮,根据每项的数据生成连接打开百度地图,我是这样绑定的: 页面:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <a [href]="nav(item)" target="_blank" ion-button icon-left clear small>
        <ion-icon name="pin"></ion-icon>
        <div>导航</div>
</a>

代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  nav(item) {
    let url = `bdapp://map/navi?location=${item.lng},${item.lat}`;
    if (Device.platform == 'iOS') {
      url = `baidumap://map/direction?origin=34.264642646862,108.95108518068&destination=${item.lng},${item.lat}&mode=driving&coord_type=wgs84&src=webapp.navi.yourCompanyName.yourAppName`;
    }
    console.log(url);
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

我查看console,发现一直在输出:

console一直在输出

原来这是Angular2在change detection cycle中不停的调用绑定的方法nav(item)。因此,建议不要在属性上绑定方法,因为调用太频繁了,最好预先计算好然后绑定一个值就好。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.02.13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Ionic 2 添加页面创建页面创建附加页面
现在我们已经基本知道了Ionic2 app的布局,接下来我们来走一遍在我们的app里创建和导航页面的过程。 先看看src/app/app.html, 接近底部的地方有如下内容: <ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 注意[root]属性绑定。设置了ion-nav组件的根页面或是第一个基本页面。当加载ion-nav是,rootPage变量引用的就是根页面。 在 src/app/app.c
孙亖
2018/06/06
2.6K0
怎么处理多层Json数据循环遍历的问题?看这里
今天我们写一个关于处理多层for循环的问题,其实这个严格来说不是多层循环的问题,他的本质其实是对Json数据格式的处理,很多时候啊我们的数据格式是这样的
何处锦绣不灰堆
2020/05/29
1.9K0
怎么处理多层Json数据循环遍历的问题?看这里
ionic4 -- angular 跳转页面
ionic4 与前辈们最大的不同就是通过angular引入了route,这样每次跳转的时候只需要直接跳转对应的路由地址就可以了,给了路由器上的解耦,也解决了原来的RXjs与Events的子页面反复跳转重复添加监听问题【挖坑,具体操作等后面进一步深入研究】。通过翻阅源码,我们看到:
stormKid
2018/09/12
2.9K0
ionic4 -- angular 跳转页面
Ionic3 导航分析
路由是前端构建单页面应用(SPA)必不可少的一部分,AngularJS1.x中有两种路由实现,一个是内置的ngRouter,还有一个是基于 ngRoute 开发的第三方路由模块uiRouter。这里为什么要提uiRouter?因为就自我感觉而言uiRouter 和 ionic导航在使用方式上有点像,特别是从它们提供的指令这一层来考虑。如果你没有了解过Angular4中的路由,其实也可以简单看看uiRouter的使用,不需要了解的多详细,仅仅理解它的那个指令的使用方式就可以了。
spilledyear
2018/08/21
2.1K0
Ionic3 导航分析
利用python开发小工具
在日常工具中,我们需要利用一些工具来减少重复,耗时的劳动。有时候这样的工具没有现成的。我们得利用自己的智慧,来造一些工具来提高效率。
赵云龙龙
2019/08/20
6970
利用python开发小工具
vue + 高德地图
https://lbs.amap.com/api/javascript-api-v2/summary
用户4396583
2024/09/23
2270
Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查
今天,我们使用REST API实现用户名密码认证,服务端端点如下: Endpoint 请求 响应 /login { username: '',password: '' } auth_token /logout add a token to headers /register { username: '', password: '' } 1、创建Ionic 2 APP 反复练习,应该是很熟悉了: ionic start Ionic2RestAuth --v2 我习惯上会先启动看看,确保项目创建成功: c
孙亖
2018/06/07
3.9K0
ionic 中 cordova-plugin-inappbrowser组件的使用
在上一篇文章中(使用Ionic3创建原生app系统入门)介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。
易兒善
2018/08/21
2.3K0
ionic 中 cordova-plugin-inappbrowser组件的使用
使用Angular8和百度地图api开发《旅游清单》
本文的目的是通过一步步实现一个旅游清单项目,让大家快速入门Angular8以及百度地图API。我们将收获:
徐小夕
2019/08/09
6.1K1
使用Angular8和百度地图api开发《旅游清单》
Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结
0 开始之前 通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。 1 创建一个新的Ionic 2 应用 我们将使用有Ionic团队创建的tutorial模板,可见于官方教程,来创建我们的应用程序。要做到这一点,您需要运行以下命令: ionic start ionic2-tutorial tutorial --v2 现在您的应用程序将自己开始建立。为运行后续的命令,你应当将项目目录作为当前工作目录: cd ionic2-tutorial 简单瞟一眼应用
孙亖
2018/06/06
4.6K0
微信小程序新闻信息列表展示
微信小程序信息展示列表 效果展示 wxml <!-- 轮播图 --> <view class='haibao' bindtap="seeDetail" id="{{item.activityCon
达达前端
2019/07/03
3K0
微信小程序新闻信息列表展示
「原生案例」如何在JavaScript中实现实时搜索功能
无论您是经验丰富的开发人员还是刚开始编码之旅的新手,本文旨在为您提供一般编码知识和工具,以便将实时搜索功能融入到您的项目中。通过本指南的学习,您将对相关概念和技术有扎实的理解,从而能够创建响应式和交互式的搜索功能,实现用户输入时动态更新的效果。
前端达人
2023/10/22
1.5K0
「原生案例」如何在JavaScript中实现实时搜索功能
react条件判断、行内样式style、动态绑定className、循环生成节点、数据监听useEffect
言程序
2024/07/03
4800
Angular 从入坑到挖坑 - Router 路由使用入门指北
Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递。至于路由守卫、路由懒加载等“高级”特性,并不会在本篇文章中呈现
程序员宇说
2020/05/19
4.4K0
一个Demo学会用Android兼容包新控件
伟大的Google为Android推出了一系列的兼容包,最新的就是Design Support Library了,这里我们结合v7和v4中的几个控件,来主要学习Design Support Library中的几个新控件!一个Demo学会用它们!
GitOPEN
2019/01/29
1.6K0
一个Demo学会用Android兼容包新控件
使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结
本文使用Ionic2从头建立一个简单的Todo应用,让用户可以做以下事情: 查看todo列表 添加新的todo项 查看todo详情 保存 todo到持久化存储 0 开始之前 本教程需要你了解基本的Ionic 2概念。已经在电脑上安装了Ionic 2。如果没有,先去安装和学习吧。 1 创建新的Ionic 2工程 我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架,但有一些示例代码供我们使用。 运行以下命令创建新项目 ionic start ionic-todo blank --v2 一
孙亖
2018/06/06
6.4K0
前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。AngularJS是框架而jQuery则是库。
张果
2018/07/31
12.8K0
前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序
现在我们可以app.component.html用这个替换:Angular是由Google开发的AngularJS框架的新版本。它带有一个完整的重写,以及各种改进,包括优化构建和更快的编译时间。在这个Angular 5教程中,我们将从头开始构建一个笔记应用程序。如果您一直在等待学习Angular 5,本教程适合您。
WindCoder
2018/09/19
43.4K0
一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序
猿实战10——动态表单之实现类目属性绑定
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是问题。想要一起实战吗?关注公号即可获取基础代码!
山旮旯的胖子
2020/09/14
9430
UniApp 中制作一个横向滚动工具栏
最近在用 UniApp 开发项目时,需要一个横向滑动的工具栏。常见的工具栏一般都是竖着的,但横向滑动的工具栏不仅能展示更多内容,还能让界面看起来更加丰富。不过很多朋友可能会发现,如何让内容“横着”展示又不变形、能流畅滚动、并且能自适应多种屏幕宽度,还是有点麻烦的。
繁依Fanyi
2025/02/16
1550
UniApp 中制作一个横向滚动工具栏
推荐阅读
相关推荐
Ionic 2 添加页面创建页面创建附加页面
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验