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

无法使用*ngFor在Ionic 3中滚动项目

在Ionic 3中,*ngFor指令默认是无法在滚动项目中使用的。这是因为Ionic 3使用了Virtual Scroll技术来提高性能和滚动的流畅度。Virtual Scroll是一种优化技术,它只会渲染当前可见区域的项目,而不是渲染整个列表。

如果你想在Ionic 3中实现滚动项目并使用ngFor指令,你可以使用Ionic提供的ion-virtual-scroll组件来实现。ion-virtual-scroll是Ionic团队为了解决这个问题而开发的一个组件,它可以让你在滚动项目中使用ngFor指令。

使用ion-virtual-scroll组件的步骤如下:

  1. 首先,在你的Ionic项目中导入ion-virtual-scroll组件:
代码语言:typescript
复制
import { VirtualScrollModule } from 'ionic-angular';
  1. 然后,在你的模块的imports数组中添加VirtualScrollModule:
代码语言:typescript
复制
imports: [
  VirtualScrollModule
]
  1. 接下来,在你的模板中使用ion-virtual-scroll组件来替代*ngFor指令。例如,如果你有一个items数组,你可以这样使用ion-virtual-scroll:
代码语言:html
复制
<ion-list [virtualScroll]="items">
  <ion-item *virtualItem="let item">
    {{ item }}
  </ion-item>
</ion-list>

在这个例子中,items是你的数据数组,*virtualItem是ion-virtual-scroll指令,它会根据items数组的长度动态生成项目。

这样,你就可以在Ionic 3中实现滚动项目并使用*ngFor指令了。

关于腾讯云相关产品和产品介绍链接地址,由于不能提及具体的品牌商,建议你访问腾讯云的官方网站,查找与云计算相关的产品和服务。腾讯云提供了丰富的云计算解决方案,包括云服务器、云数据库、云存储等,你可以根据自己的需求选择合适的产品。

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

相关·内容

【组件篇】ionic3分组索引及锚点滚动列表

先前写过另一篇文章《ionic3开源组件》,里面有一个分类我其实没怎么用过: 锚点滚动列表 ionic2-alpha-scroll ionic2-indexed-scroll ionic3-index-list...,只是觉得它写得有点复杂了,和现有ionic的组件集成度还没那么好(如不能很好兼容使用单选和多选列表),所以花了几分钟,在大部分沿用原来代码的基础下,简单改动了下: 移除多余的ion-index-cell...; ion-index-section修改为index-group,并替换为官方list的相关组件; 修改锚点滚动逻辑; 修改原有组件不能动态刷新锚点栏的bug; 代码为index-list(原来代码基本没动...,只改动锚点滚动逻辑)和index-group(重新实现)共两个组件,所以会发现两种不同的代码风格。...源码放在了ionic-components中。

1.5K20
  • ionic3升级适配angular5

    昨天angular5和ionic3同时发布更新了,为了用上angular5的新特性,还是有必要踩下坑的,当然踩坑的白老鼠建议选用一个最近不用维护的项目。...: { "@ionic/app-scripts": "3.1.0" "typescript" : "2.4.2" } 接着执行命令重新安装依赖: npm install 二、修改项目文件 我们可以先看下...enableLegacyTemplate也已经失效; compiler: 编译选项useDebug从v4版本已经弃用且无效,现在移除; common: NgFor在v4版本被弃用,现用NgForOf代替...,但不影响在模版中使用*ngFor; common: NgTemplateOutlet#ngOutletContext在v4版本被弃用,使用NgTemplateOutlet#ngTemplateOutletContext...在本项目中,因为没有用到那几个内置管道,也没有用到路由,所以主要是调整Http模块: 在4.x中HttpClient模块被封装在@angular/common中,新的HttpClient被封装在@angular

    2.5K40

    使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    已经在电脑上安装了Ionic 2。如果没有,先去安装和学习吧。 1 创建新的Ionic 2工程 我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架,但有一些示例代码供我们使用。...运行以下命令创建新项目 ionic start ionic-todo blank --v2 一旦代码生成,在文本编辑器打开项目。...可以看到Ionic 2项目的基本结构, 这些是由Ionic CLI生成的代码。...我不会在本教程中使用类型,除了依赖注入是不可替代的地方(我们将稍后介入)。如果你想知道更多关于在Ionic 2中使用类型,应该学习TypeScript或ECMAScript 6相关知识。...(SOME_PAGE); 或者 ionic g page AddItemPage 我们已经创建了添加和查看项目的方法,在更进一步之前我们不得不先创建 AddItemPage andItemDetailPage

    6.1K50

    Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

    为运行后续的命令,你应当将项目目录作为当前工作目录: cd ionic2-tutorial 简单瞟一眼应用效果,使用serve命令: ionic serve 上面也说了,这些命令应该在当前项目目录下执行...2 目录结构 如果你看看生成的文件和文件夹,这一切看起来非常类似于一个Ionic 1最初的应用程序。这也是一个非常典型的科Cordova风格项目结构。...如果你想重复使用一个特定的功能,或有很多人工作在同一个项目中,旧的Ionic 1方法会变得非常麻烦。...根据功能组织代码的想法不是Angular 2 & Ionic 2 的特权,事实上人们在Ionic 1中使用和倡导基于特征的方式,只是大多数人没那样做(趋势是很难打破)。...通过在构造函数上面定义,我们就可以在整个类里通过this.rootPage或 this.pages来使用。

    4.4K50

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

    三者简单说明如下: 原生开发就是用原生支持的开发语言,调用原生SDK开发; 加壳在线WebApp是在一个WebView容器执行,网页部署在服务器,基本不调用原生功能; 而混合式开发,如果有了解过一些的话...Hybird应用Cordova技术,它只提供了使用JavaScript调用Native功能,在开发的时候还需要开发人员自己去实现诸如样式美化、页面切换、数据展示、弹出框、Modal窗体、日期选择器等功能或组件...,其它变化不大,具体更新如下: Angular 4.0 新的版本下,改进 AOT 编译器,分离 animations 包,缩小生成后的代码量,运行更快,改进ngIf 和ngFor 等具体内容可以访问...@IonicPage装饰器 ionic2中导航器不是基于url的,如果想使用url访问就要通过DeepLinker来实现,这是比较麻烦的,而在新版本中可以通过@IonicPage装饰器来实现。...并且可以更轻松的在项目中设置延迟加载,设置延迟加载页面的优先级,并为每个页面自定义配置。

    2.7K40

    使用Ionic React实现的无限滚动效果

    Ionic React 是今年新出的版本 官网 https://ionicframework.com/docs/react 开始之前 在我们创建一个无限滚动项目之前,我们需要一个 Ionic...安装过程查看官网文档或者 https://www.npmjs.com/package/@ionic/react 来查看 使用以下命令来创建一个项目 ionic start infiniteScroll...,我们需要一个API来获取到数据并将它显示到我们的项目中,这里我将使用 DOG API 来获取到数据。...所以,在使用的过程中,很有可能会有重复的“狗狗”。 加载初始数据 Ionic 提供了我们可以在应用程序中使用的多个生命周期事件,它不仅为标准组件库提供了这类事件,也同样为功能组件提供了类似事件。...ionic serve 来启动我们的项目。

    3.1K60

    【Appetite】ionic3实录(六)首页实现

    在写这个组件前,我们按照页面的顺序先逐个实现。不知道一个小时能写完不,赶上班… 仍然是先上UI设计图: ?...image.png 观察之,发布者和内容的文本信息可以用ionic现有的组件实现,而视频播放和图片画廊(如果是轮播图可以用slides组件,它是阉割并封装过的swiper,好像现在这样的效果不能实现)需要使用第三方组件...二、准备数据: 我仍是图省事,这里采用本地数据,在src/assets里面新建data文件夹,再在里面建一个friend-news.json文件,为了便于观察,整理了内容如下: { "success...: getFriendNews(){ //第二个参数为false表示使用相对路径 return this.commonProvider.get("...../assets/data/friend-news.json", false); } 最后记得在app.module.ts里面的providers里添加配置它,至此数据就准备好了。

    1.1K40

    【组件篇】ionic3开源组件

    : 这里是组件篇,所以关于开源项目和插件的分别放在其它章,因为图片多会影响本文速度和美观,所以只放部分图。...提醒一点,ionic3除了很方便使用ionic2及以上组件外,也很方便引入angular2或普通js的组件。这里列的基本都是ionic2,如果没有,可以自行找angular2或js的。...ionic2-datepicker easy-ionic2-calendar 滑动选项卡 ionic2-super-tabs Ionic2-ScrollableTabs ionic3-swipetabs-segment...ionic2-autocomplete 锚点滚动列表 ionic2-alpha-scroll ionic2-indexed-scroll ionic3-index-list——群里有人发就补充上来了...ionic2-indexed-scroll 透明状态栏 ionic2-transparent-bar 多层菜单 Ionic3-MultiLevelSideMenu 滚动收缩 Ionic2-FullscreenContent

    1.9K40

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

    我们观察initSwiper方法,第一个参数'.wheel .swiper-container'其实是个选择器,所以它也是依托dom操作的,此外,由于我们使用了数据绑定,this.vm.dessertSlides...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它时都需要显式调用一下...是的,在大多场景中可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下ts和html文件。...ChangeDetectorRef } from '@angular/core'; import { NavController, Slides, PopoverController } from 'ionic-angular...是因为该组件在异步获取到数据this.vm.dessertSlides前已完成了初始化了,这样新数据其实没有应用到,为了处理这种情况,我们改造一下html,为ion-slides组件加上一段*ngIf=

    1.5K20

    Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上的最佳实践(n)共享模块XxxModule.forRoot配置核心服务知识点

    4-在应用程序级提供服务,以便应用中的任何组件都能使用它。...@NgModule({ // 1-这里只导入了CommonModule和IonicModule // CommonModule中有 *ngIf和*ngFor // IonicModule 中有...* 等价于,将组建放到这里,除去模板中用到的组件外,别的地方都可可以随意使用,尤其是ionic的导航中。.../sino-file-list.component.css'], providers: [FileService], }) 在模块创建中提供服务 在模块创建中提供服务,可以在该模块的任何组建个中依赖注入然后使用...>我们在根模块中imports了`IonicModule`,但是在crud模块中也必须重新imports`IonicModule`,不然,crud模块中会不识别ionic的指令。 * ?

    2.2K30

    Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)

    写在前面 在angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/...1、如何使用第三方库,安装-引用(主要参考官方文档) 2、{{}}指令,单向绑定数据,声明数据-绑定数据 3、[(ngModel)]指令,双向绑定数据,声明数据-绑定数据 4、*ngFor指令,循环渲染...安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们的font-awesome图标苦,在我们项目index.html中引用 滚动。...我选择固定中间按钮,使用动态绑定样式让中间部分的高度等于页面高度-底部和顶部的高度,设置overflo为scroll; 在accounting.component.ts中添加样式数据如下: contentStyle

    2.2K20

    【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例

    划重点 RxJS-DOM 原文示例中使用这个库进行DOM操作,笔者看了一下github仓库,400多星,而且相关的资料很少,所以建议理解思路即可,至于生产环境的使用还是三思吧。...开发中Rxjs几乎默认是和Angular技术栈绑定在一起的,笔者最近正在使用ionic3进行开发,本篇将对基本使用方法进行演示。...使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 尽管看起来Http请求的返回结果是一个可观测对象,但是它却没有map方法,当需要对http请求返回的可观测对象进行操作时,可以使用pipe操作符来实现...Angular中提供了一种叫做异步管道的模板语法,可以直接在*ngFor的微语法中使用可观测对象: ngFor="let contact of contacts | async"...>{{contact.name}} ngFor="let contact of contacts2 | async">{{contact.name}}</li

    6.7K20

    angular知识点梳理第二篇-基本语法

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...在需要使用数据绑定的组件进行数据的处理 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home...false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vue的template是基本一致的,不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹...运行效果 如果这个tag标签不太理解的,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个,在html的任何场景下都可以使用!

    2.6K30
    领券