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

Angular 6- *ngFor仅显示索引0

Angular 6是一种流行的前端开发框架,ngFor是Angular中的一个指令,用于在模板中循环显示数据。当使用ngFor指令时,可以通过添加索引变量来获取当前循环的索引值。

*ngFor指令的语法如下:

代码语言:txt
复制
*ngFor="let item of items; let i = index"

其中,items是要循环的数据集合,item是当前循环的元素,i是当前循环的索引。

对于只想显示索引为0的元素,可以使用条件语句来判断索引值是否为0,并在满足条件时显示相应的内容。以下是一个示例:

代码语言:txt
复制
<div *ngFor="let item of items; let i = index">
  <ng-container *ngIf="i === 0">
    <!-- 显示索引为0的元素 -->
    {{ item }}
  </ng-container>
</div>

在这个例子中,items是要循环的数据集合,item是当前循环的元素,i是当前循环的索引。通过使用ng-container元素和*ngIf指令,我们可以在满足条件时显示索引为0的元素。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的品牌商,我无法给出具体的链接。但是,腾讯云作为一家知名的云计算服务提供商,提供了丰富的云计算产品和解决方案,包括云服务器、云数据库、云存储等。您可以通过访问腾讯云的官方网站,了解更多关于腾讯云的产品和服务。

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

相关·内容

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...public list: Array = [{ title: '栗子', id: 0 }, { title: '苹果', id: 1 }, { title:...-- 将list的索引值获取到赋值给i --> {{item.title}} - {{i}} -...: false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vue的template是基本一致的,不是完全一致,我们可以将它看作一个承载体

2.5K30

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

NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。 您可以定义一个HTML块来定义应该如何显示单个项目。 您告诉Angular将该块用作呈现列表中每个项目的模板。...分配给* ngFor的文本是指导迭代器进程的指令。 *ngFor微语法 分配给* ngFor的字符串不是模板表达式。 这是一种微语法 - Angular解释的一种小语言。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代中项目的从零开始的索引。 您可以捕获模板输入变量中的index,并在模板中使用它。...下一个示例捕获名为i的变量中的索引,并使用像这样的英雄名称来显示它。...它可以根据切换条件从几个可能的元素中显示一个元素。 Angular只把选中的元素放入DOM中。

29.9K20

Angular 2 数据显示

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

2.4K20

Angular2 之 结构型指令几个概念

在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化的途径。 Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。...angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行!它还是占用着那么多的资源。 另外一方面,重新显示这个组件会很快。... 这时候显示的内容是'Hip! Hooray!',在Angular的控制下,DOM的效果是不同的。 ?...要么显示的包含在Template标签中,要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。...宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20

AngularDart 4.0 高级-管道 顶

0, exponent ?? 1); } 这个管道定义揭示了以下关键点: 管道是用@Pipe元数据注解的类。...如果你点击reset按钮,Angular用原有英雄的新列表替换heroes并更新显示。 如果您添加了删除或更改英雄的功能,Angular会检测这些更改并更新显示。...Flying Heroes应用程序通过复选框开关和附加显示扩展代码,以帮助您体验这些效果。 ? 替换列表是发信号通知Angular更新显示的有效方式。 你什么时候更换清单? 数据发生变化时。...纯净的管道 Angular检测到对输入值的纯粹更改时才执行纯管道。 在AngularDart中,纯粹的改变仅仅来自对象引用的改变(假设所有东西都是Dart中的对象)。...--> 您通过文本字符串来识别排序字段,期望管道通过索引引用属性值(如hero

6.3K20

ng-content 中隐藏的内容

由于许多问题与Angular 中的组件生命周期相关,因此我们的主要组件将显示一个计数器,用于展示它已被实例化的次数: import { Component } from '@angular/core';...难道这是 ngIf 指令产生的问题,让我们测试一下 ngFor 指令,看看是否有同样的问题: import { Component } from '@angular/core'; @Component...> ` }) class Wrapper { items = [0, 0, 0]; } 以上代码运行后与我们使用多个 的效果是一样的...让我们再验证一下 *ngFor 指令: @Component({ selector: 'wrapper', template: ` <div class="box" *ngFor="let...0, 0]; @ContentChild(TemplateRef) template: TemplateRef; } 上面代码成功运行后,每个盒子中有一个计数器,显示 1,2 和 3,这正是我们之前预期的结果

2.7K30

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

也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它时都需要显式调用一下...数据未正确应用 对比上一节的实际效果图,会发现这里只显示了两个图片,什么原因呢?...这样新数据其实没有应用到,为了处理这种情况,我们改造一下html,为ion-slides组件加上一段*ngIf="vm.dessertSlides && vm.dessertSlides.length>0"...slidesPerView="2" initialSlide="1" zoom="false" *ngIf="vm.dessertSlides && vm.dessertSlides.length>0"...> 这样当新数据有值且长度大于0时,才会显示ion-slides组件,进而内部进行初始化,此时运行看效果如下,只是此时有个比较突兀的2图向3图切换效果,有兴趣的可以试试

1.4K20
领券