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

Angular和Ionic 2:使用NgFor和条件显示,每行显示2列

Angular是一种流行的前端开发框架,而Ionic 2是一个基于Angular的移动应用开发框架。在使用Angular和Ionic 2时,可以使用NgFor指令和条件显示来实现每行显示两列的效果。

NgFor是Angular中的一个内置指令,用于在模板中循环遍历一个集合,并为每个元素生成相应的HTML代码。通过结合NgFor和条件显示,可以实现每行显示两列的布局。

以下是一个示例代码:

代码语言:html
复制
<div class="row">
  <div class="col" *ngFor="let item of items; let i = index;">
    <div *ngIf="i % 2 === 0">
      {{ item }}
    </div>
    <div *ngIf="i % 2 !== 0">
      {{ item }}
    </div>
  </div>
</div>

在上述代码中,我们使用了Bootstrap的栅格系统来创建行和列的布局。NgFor指令用于循环遍历名为items的集合,并为每个元素生成一个列。通过使用条件显示,我们根据元素的索引来决定将其放置在左侧列还是右侧列。

这种布局适用于需要将数据按照每行两列进行展示的场景,例如商品列表、图片展示等。

腾讯云提供了一系列与前端开发和移动应用开发相关的产品和服务,例如:

  1. 云服务器(CVM):提供可扩展的虚拟服务器实例,用于部署和运行前端和移动应用。 产品介绍链接:https://cloud.tencent.com/product/cvm
  2. 云存储(COS):提供高可靠、低成本的对象存储服务,用于存储前端和移动应用的静态资源。 产品介绍链接:https://cloud.tencent.com/product/cos
  3. 云函数(SCF):无服务器函数计算服务,可用于编写和运行前端和移动应用的后端逻辑。 产品介绍链接:https://cloud.tencent.com/product/scf

请注意,以上仅为示例产品,实际选择产品时需根据具体需求进行评估和选择。

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

相关·内容

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

angular的脏检测机制是基于一定条件时间的,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果的,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它时都需要显式调用一下...是的,在大多场景中可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下tshtml文件。.../core'; import { NavController, Slides, PopoverController } from 'ionic-angular'; import { AboutProvider...数据未正确应用 对比上一节的实际效果图,会发现这里只显示了两个图片,什么原因呢?

1.4K20

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

本文使用Ionic2从头建立一个简单的Todo应用,让用户可以做以下事情: 查看todo列表 添加新的todo项 查看todo详情 保存 todo到持久化存储 0 开始之前 本教程需要你了解基本的Ionic...已经在电脑上安装了Ionic 2。如果没有,先去安装学习吧。 1 创建新的Ionic 2工程 我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架,但有一些示例代码供我们使用。...root page 根页面是您应用程序显示的第一个页面,然后你可以从这里导航到其他页面。改变Ionic 2应用程序中的视图可以通过改变这一根页面,或** push ** 推或 pop弹出视图。...现在我们要做的是创建一个服务被称为Data用来处理存储检索数据。我们将使用Ionic 2提供的Stroage服务来帮助我们做到这一点。...Stroage服务是Ionic 2的通用存储服务,它负责存储数据的最佳方式,同时提供了一致的API供我们使用

6.1K50

ionic3升级适配angular5

昨天angular5ionic3同时发布更新了,为了用上angular5的新特性,还是有必要踩下坑的,当然踩坑的白老鼠建议选用一个最近不用维护的项目。...首次支持angular5的ionic3版本 然后再看下angular5的版本,同样发布了两个版本,一个是普通稳定版,一个是beta版,其中前者如图所示修复了几个bug,那若升级,当然选择普通稳定版比较好...angular5的最新beta版 在ionic3官网建议是更新依赖到angular5.0.0版本,而根据上述说明,优先选择做了做了bug修复的angular5.0.1版。...": "5.0.1", "@angular/platform-browser-dynamic": "5.0.1", "@ionic/storage": "2.1.3", "ionic-angular...在v4版本被弃用,现用NgForOf代替,但不影响在模版中使用*ngFor; common: NgTemplateOutlet#ngOutletContext在v4版本被弃用,使用NgTemplateOutlet

2.5K40

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

;第二代以React Native为代表,业务及虚拟页面通过js实现,然后通过js桥接,使用原生界面渲染,也就是说,它比第一代增强了页面显示的功能,等到第三代了,通过编译时把js桥接部分也省掉,直接生成原生可执行的代码...一些语法架构都有了变化,在此基础上Ionic2也同步发展。...等到angular2的更新到了一定版本,一些依赖库分属于23,为了便于版本的统一管理,直接跳到了angular4,其实angualr24两者的变化不算太多。相应的ionic2也同步升级到3。...其实ionic3基本向下兼容ionic2,除去性能等问题,两个版本变更编码直观感受深点的,就是懒加载路由的调整(新版懒加载变得更加简单,利于web版开发和加快页面首屏加载),另外还有内置指令的更灵活化...,其它变化不大,具体更新如下: Angular 4.0 新的版本下,改进 AOT 编译器,分离 animations 包,缩小生成后的代码量,运行更快,改进ngIf ngFor 等具体内容可以访问

2.7K40

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地在列表下方显示一条消息。...修改后的模板使用双重大括号插值显示两个组件属性: template: ''' {{title}} My favorite hero is: {{myHero}}</h2...Angular ngFor指令来显示英雄列表中的每个项目。...Angular没有显示隐藏消息。 它正在添加删除DOM中的段落元素。 这可以提高性能,特别是在大型项目中,当有条件地包含或排除大量的HTML与许多数据绑定。 试试看。...概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类,用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件显示基于布尔表达式的HTML块。

5.3K10

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

image.png 观察之,发布者内容的文本信息可以用ionic现有的组件实现,而视频播放图片画廊(如果是轮播图可以用slides组件,它是阉割并封装过的swiper,好像现在这样的效果不能实现)需要使用第三方组件...: getFriendNews(){ //第二个参数为false表示使用相对路径 return this.commonProvider.get(".....三、安装视频播放组件 用的是videogular2,可参考我另一篇文章:《【技巧】ionic3视频播放》 四、安装swiper组件 npm install swiper --save 四、实现首页 打开...home.ts文件,修改内容为: import { Component, ViewChildren, ChangeDetectorRef } from '@angular/core'; import {...NavController } from 'ionic-angular'; import { HomeProvider } from '../..

1.1K40

AngularDart 4.0 高级-结构指令 顶

NgFor指令具有比本指南中显示的NgIf更多的功能,包括必需的可选的。 至少NgFor需要一个循环变量(let hero)一个列表(heroes)。...每个宿主元素一个结构指令 有一天你会想重复一段HTML,但只有当特定条件成立时才会重复。 您将尝试将*ngFor*ngIf放在同一宿主元素上。 Angular不会允许。...NgSwitchCaseNgSwitchDefault是结构指令。使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase的值与switch的值匹配时,会显示它的宿主元素。...UnlessDirective在条件为false时显示内容。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgForNgSwitch内置指令如何工作。

16K20

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件的属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以在该章节上下载源码,并修改以下提到的几个文件。..., template: ` {{title}} 我喜欢的网站: {{mySite}} ` }) export class AppComponent...{ title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title mySite 属性的值,并显示在浏览器中,显示信息如下: 使用 ngFor...显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts 文件: import { Component } from '@angular/core'; @Component

2.4K20

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

1 创建一个新的Ionic 2 应用 我们将使用Ionic团队创建的tutorial模板,可见于官方教程,来创建我们的应用程序。...根据功能组织代码的想法不是Angular 2 & Ionic 2 的特权,事实上人们在Ionic 1中使用倡导基于特征的方式,只是大多数人没那样做(趋势是很难打破)。...通过Angular 2 的工作方式,默认就使用基于特征的结构,因此不难推行这种结构。 index.html 已经是惯例了,浏览器第一个打开的文件就是 index.html 。...通常,我们导入NavController 使用与 MenuController Platform 同样的方式然后调用它的 setRoot,但是你不能从根组件调用它,作为替换我们获取引用通过Angular2...总结 毫无疑问Ionic 2Angular 2 取得了巨大的进步在组织结构性能上,但他们看起来也很吓人。尽管最初似乎需要很多学习和面对困扰,但我认为它很有意义。

4.4K50

Angular2 之 结构型指令几个概念

在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化的途径。 Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。...结构型指令 结构型指令通过添加删除 DOM 元素来改变DOM的布局。 我们经常看到的内置的结构型指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIf。...template-in-out-of-a2.png 显然,Angular把标签及其内容替换成了一个空白 标签。 这只是它的默认行为。...要么显示的包含在Template标签中,要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIfngFor —— 无论是写还是读。...宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20

AngularDart4.0 指南- 模板语法二 顶

以前缀类开始,可选地跟一个点(.)一个CSS类的名字替代括号内的元素属性:[class.class-name]。 以下示例显示如何使用class绑定来添加删除应用程序的“special”类。...本节介绍常见的结构指令: NgIf:有条件地从DOM中添加或删除元素。 NgFor:为列表中的每个项目重复一个模板。 NgSwitch:只显示多个可能元素中的一个。...NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。 您可以定义一个HTML块来定义应该如何显示单个项目。 您告诉Angular将该块用作呈现列表中每个项目的模板。...它可以根据切换条件从几个可能的元素中显示一个元素。 Angular只把选中的元素放入DOM中。...null属性路径 Angular安全导航运算符(?.)与Dart条件成员访问运算符一样,是防止属性路径中的空值的便利方法。 在这里,如果currentHero为空,则防止视图呈现失败。

29.9K20
领券