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

Ionic 3 *ngIf不更新视图

Ionic 3是一个流行的移动应用开发框架,它基于Angular框架构建,并使用了Ionic的UI组件库。*ngIf是Angular中的一个指令,用于根据条件来显示或隐藏HTML元素。

在Ionic 3中,*ngIf指令用于根据条件来动态更新视图。当条件为真时,指令所在的元素会被渲染并显示在页面上;当条件为假时,指令所在的元素会被从DOM中移除,从而隐藏起来。

然而,有时候在使用Ionic 3的*ngIf指令时,可能会遇到视图不更新的问题。这可能是由于以下几个原因导致的:

  1. 数据绑定问题:确保条件表达式绑定的数据是可观察的,并且在数据发生变化时能够正确地触发变更检测机制。可以使用Angular的ChangeDetectionRef服务手动触发变更检测。
  2. 变更检测策略:Angular提供了几种变更检测策略,包括默认的ChangeDetectionStrategy.Default策略和OnPush策略。在使用*ngIf指令时,可以尝试使用OnPush策略来提高性能并确保视图能够正确更新。
  3. 异步操作问题:如果条件表达式中涉及到异步操作,比如Promise或Observable,需要确保在异步操作完成后,手动触发变更检测以更新视图。

总结起来,当遇到Ionic 3的*ngIf不更新视图的问题时,可以检查数据绑定、变更检测策略和异步操作等方面,以确保视图能够正确地更新。

腾讯云提供了一系列与移动应用开发相关的产品和服务,包括云服务器、云存储、云数据库、人工智能等。具体推荐的产品和产品介绍链接地址可以根据具体需求和场景来选择,可以参考腾讯云的官方文档和产品页面来获取更详细的信息。

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

相关·内容

  • 【技巧】ionic3独享滚动区域之滑动segment

    好久没写ionic相关内容,写一篇吧。...想象一下这样一个场景,通过segment切换页面,通过*ngIf等类似指令来模拟显示不同页面的内容,代码表示如下: <div *ngIf="vm.selectedSegment...selectedSegment我使用了字符串,而不是理论上应该适用的整型,因为版本问题,整型值赋给ion-segment-button的value时,内部有时把它处理为整型,有时又处理为字符串型,这样双向绑定就对应上...overflow-y: auto; } } 说白了就是添加多个带overflow-y: auto;的切换容器,后来发现在旧版safari中,对flex布局部分兼容...*注意:这里为了演示独享滚动条使用了ion-slides,实际应用上我更喜欢用swiper.js,因为ion-slides总有些奇奇怪怪的情况出现,就像我在【Appetite】ionic3实录(七)次页实现及分析解决问题

    1.7K20

    【开发指南】(三)认识ionic3

    等到angular2的更新到了一定版本,一些依赖库分属于2和3,为了便于版本的统一管理,直接跳到了angular4,其实angualr2和4两者的变化不算太多。相应的ionic2也同步升级到3。...或许有人会说,ionic2才接触没多久,结果又升到ionic3了,会不会太快不适应?...其实ionic3基本向下兼容ionic2,除去性能等问题,两个版本变更编码直观感受深点的,就是懒加载和路由的调整(新版懒加载变得更加简单,利于web版开发和加快页面首屏加载),另外还有内置指令的更灵活化...,其它变化不大,具体更新如下: Angular 4.0 新的版本下,改进 AOT 编译器,分离 animations 包,缩小生成后的代码量,运行更快,改进ngIf 和ngFor 等具体内容可以访问...angular4更新来查看。

    2.7K40

    【Appetite】ionic3实录(七)次页实现及分析解决问题【上】

    最近有点忙,好久没更新了,还好没人催稿,也没人想打我…… 这次我们要实现这个页面效果: ? image.png 这个页面其实很简单的,唯一有点麻烦的是上面那个轮播图。.../assets/imgs/foods/3.jpg" }, { "src": "...../assets/imgs/foods/2.jpg" }] } 二、创建数据服务 执行命令创建数据服务aboutProvider: ionic g provider about 打开生成的文件并添加如下两个方法...grabCursor: true }); } } 对用于绑定的对象,我一般把它们放在一个叫vm的对象下,便于肉眼区分是绑定对象还是普通变量,这样当看到带vm前缀的变量赋值时,就会想到要刷新页面视图的情况...],不用*ngIf或者ngSwitch?

    67750

    【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

    dom,所以应该在数据更新从而使得dom更新完成后再调用initSwiper方法。...问题二:为什么用[hidden],不用*ngIf或者ngSwitch? 因为前者只是隐藏,而后两者是会移除。...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用的多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...ChangeDetectorRef } from '@angular/core'; import { NavController, Slides, PopoverController } from 'ionic-angular.../ion-slide> 这样当新数据有值且长度大于0时,才会显示ion-slides组件,进而内部进行初始化,此时运行看效果如下,只是此时有个比较突兀的2图向3图切换效果

    1.4K20

    AngularDart4.0 指南- 显示数据 顶

    当这些属性改变时,Angular会更新显示。 更准确地说,重新显示是在与视图相关的某种异步事件之后发生的,例如按键,计时器完成或对HTTP请求的响应。...用NgIf进行条件显示 有时候,只有在特定情况下,应用程序才需要显示视图视图的一部分。 如果有三个以上的英雄,让我们更改示例以显示一条消息。...要看到它的实际操作,请在模板的底部添加以下段落:lib/app_component.dart (message) 3">There are many...双引号内的模板表达式,* ngIf =“heros.length> 3”,看上去和表现很像Dart。 当组件的英雄列表中有三个以上的项目时,Angular会将该段落添加到DOM,并显示消息。...="heroes.length > 3">There are many heroes!

    5.3K10

    AngularDart 4.0 高级-结构指令 顶

    它更像是Dart if块中的花括号: if (someCondition) { statement1; statement2; statement3; } 如果没有这些大括号,Dart只会在您打算有条件地将其全部作为一个块执行时执行第一条语句...TemplateRef和ViewContainerRef 像这样一个简单的结构指令从Angular生成的中创建一个嵌入式视图,并将该视图插入与指令的原始宿主元素相邻的视图容器中...您将通过TemplateRef获取内容并通过ViewContainerRef访问视图容器。 你在指令构造函数中注入这两个类作为类的私有变量。...如果条件为假并且视图尚未创建,请告诉视图容器从模板创建嵌入的视图。 如果条件为真并且当前显示视图,则清除且销毁视图的容器。 没有人读取myUnless属性,因此它不需要getter。...Nice', 'happy'), new Hero(2, 'Narco', 'sad'), new Hero(3, 'Windstorm', 'confused'), new Hero(4,

    16.1K20

    Angular 从入坑到挖坑 - 表单控件概览

    四、Step by Step 4.1、表单简介 用来处理用户的输入,通过从视图中捕获用户的输入事件、验证用户输入的是否满足条件,从而创建出表单模型修改组件中的数据模型,达到获取用户输入数据的功能 模板驱动表单...public name = new FormControl(''); constructor() { } ngOnInit(): void { } } 当在组件中创建好控件实例后,通过给视图模板上的表单控件添加...FormControl('啦啦啦'), age: new FormControl(12) }); constructor() { } ngOnInit(): void { } } 在视图模板中...} ngOnInit(): void { } submit() { alert(JSON.stringify(this.profileForm.value)); } } 在视图模板中...某些情况下,我们只是想要更新控件组中的某个控件的数据值,这时需要使用 patchValue 的方式进行更新 import { Component, OnInit } from '@angular/core

    18.9K20

    AngularDart4.0 英雄之旅-教程-04明细 顶

    如果您的结构匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。 当您进行更改时,请通过重新加载浏览器窗口来保持运行。...应用模板文件 您将对应用程序组件的模板进行多次更新。...cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em...但是列表和细节视图没有连接。 当用户从列表中选择一个英雄时,选择的英雄应该出现在细节视图中。 这个UI模式被称为“主/细节”。在这种情况下,主人是英雄列表,细节是选择的英雄。...然后添加ngIf核心指令并将其设置为selectedHero!= null。lib/app_component.html (ngIf) <div *ngIf="selectedHero !

    3K30
    领券