如何在NgIf语句中迭代数组- Angular / Ionic
在Angular / Ionic中，我们通常使用ngFor指令来在模板中迭代数组。
下面是如何在NgIf语句中迭代数组的步骤：
- 首先，在组件中定义一个数组。例如，我们有一个名为"items"的数组。
- 在模板中，使用*ngFor指令来遍历数组，并使用let关键字创建一个临时变量来引用每个数组元素。
- 在模板中，使用*ngFor指令来遍历数组，并使用let关键字创建一个临时变量来引用每个数组元素。
- 在这个例子中，我们遍历"items"数组，并将每个元素赋值给名为"item"的临时变量。
- 现在，我们可以在*ngIf语句中使用这个临时变量。例如，我们想要只显示数组中的偶数项。
- 现在，我们可以在*ngIf语句中使用这个临时变量。例如，我们想要只显示数组中的偶数项。
- 在这个例子中，我们使用*ngIf语句检查"item"是否为偶数。如果是，就显示该项。
通过这种方式，我们可以在NgIf语句中迭代数组并根据条件来显示或隐藏元素。
腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- 云数据库 MongoDB 版：https://cloud.tencent.com/product/mongodb
- 腾讯云容器服务：https://cloud.tencent.com/product/tke
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
相关·内容
<ion-card *ngFor="let house of (houses | async)">
<ion-list *ngIf="house.members[0] === currentUserId我希望能够遍历这个数组，因为当一个房子有许多成员时。 谢谢
浏览 11提问于2020-03-24得票数 0
我正在尝试以angular显示一组数据。数据采用键值形式。我使用*ngFor进行迭代。问题是值部分在所有记录中都不是统一的。在某些记录中，它是一个字符串，在某些记录中，它是一个数组。如何使用*ngIf遍历value字段中的内部数组，这是我的问题。我想知道如何在*ngIf内使用另一个*ngFor，以及*ngIf应该具备什么条件。
浏览 20提问于2019-04-30得票数 0
如何在Angular 2中使用*ngFor迭代多维数组。length>0 }">
<a href="#" [routerLink]="menuName.route" *ngIf="!glyphicon {{menuName.icon}}"></i><span class="nav-label">{{menuName.name}}</sp
浏览 17提问于2017-02-12得票数 1
回答已采纳
3回答
如何迭代下面属性数组中每个对象的数组映像srcs？house02.jpg", "https://s3-us-west-1.amazonaws.com/sfdc-demo/realty/house03.jpg"]我能够显示属性对象的Id，但是如何迭代图像srcs数组，以便使用图像srcs动态创建幻灯片？<ion-content>
<ion-card *ngIf="pro
浏览 0提问于2018-08-05得票数 0
回答已采纳
1回答
按角度清除和替换数组中的值
、、、、
我想计算两个人之间的距离，并把它们写在网页上。当我在html上写值时，代码被推送了不止一个，但我不想这样。我想换新的。 this.db.list("Users/subscribed/" + user.uid + "/members").snapshotChanges().subscribe(items => { let container = { lng: 0,
浏览 26提问于2019-05-13得票数 1
2回答
我正在用下面的代码迭代图像数组： <ion-row *ngFor="let image of images; let i = index;" *ngIf="{{i % 3=== 0}}">
<ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < images.length}}"><img [src]
浏览 5提问于2017-06-09得票数 1
回答已采纳
3回答
我试图存储这些数据，从Wordpress后端给出的HTTP请求在Ionic 2(角2)中提供。我收到了这个数据结构，
我试图把这些数据像菜单(menu_1和menu_2)一样存储在菜单数组中，类别存储在类别数组中，盘子存储在盘子数组中.import { NavController } from 'ionic-
浏览 2提问于2017-02-09得票数 0
回答已采纳
我一直在尝试Ionic 2与角2和它的网格布局系统。我希望能够循环遍历一个项目数组，但是由于我希望它具有响应性，我需要将每一个X项放在列和行中等等，这样如果需要的话，它们可以折叠。-- Content --></div>但我不知道如何在angular2中使用*ngFor和*ngIf？有人能帮我把这个搬过来吗？在网上找不到任何例子。非常感谢大卫。
浏览 2提问于2016-04-29得票数 1
回答已采纳
我的home.ts中有这个JSON "button1":"<p><b>first section<b></p>", "button3":"<p><b>third section<b></p>",在我的home.html上，我想看到三个
浏览 0提问于2018-01-27得票数 1
回答已采纳
2回答
我对angular是个新手。我正在尝试在组件中呈现一些来自服务器的动态模板字符串。在angular中有没有更简单的内置方法来做到这一点？例如，动态编译onChanges或onInit模板字符串，这样我就可以利用ngFor来显示数组属性中的值。templateString = '<p *ngFor="let item of arr">{{item.prop}}</p>'{{this.prop}}
]]，我的脚本可以读取并
浏览 52提问于2020-02-25得票数 2
我很难理解为什么我的*ngFor会抛给我一个带有异步的无效管道参数，如果没有它，我会得到一个错误，声明NgFor只支持绑定到可迭代对象，如数组。import { Component } from '@angular/core'; </
浏览 0提问于2018-03-20得票数 1
3回答
我想从所有表单数组的实例中获取'onduty‘值。/contract-form'import, ViewController, ModalController, NavParams, Alert, NavController, Checkbox, Platform } from 'ionic-angul
浏览 0提问于2018-07-24得票数 0
2回答
this.stuffOnView = data; error => { }这将返回一个具有数组的对象，如下所示：
<div class="task-group" *ngFor="let key of objectKeys(stuffOnView)">
<span class="column-title"
浏览 2提问于2018-11-16得票数 1
1回答
我对角和ionic 3很陌生。现在只有我在学了。</ion-select><div class="error-message-emp" *ngIfformemp.controls.gender.errors && (formemp.controls.gender.
浏览 0提问于2018-10-16得票数 0
我正在尝试做以下几件事：<div *ngIf="(observable$ | async) as results">
<div *ngIf="results?.
浏览 40提问于2020-02-11得票数 1
回答已采纳
使用Angular () & live example ()提供的动态表单示例，我尝试创建一个包含多部分答案的问题的动态表单。这就是我的问题--Contro.s
浏览 0提问于2017-08-03得票数 0
嗨，我正在尝试从angular 5中的contentful api获取最后四篇博客帖子。我已经创建了一个服务，并且我能够使用以下代码检索1。return Observable.fromPromise(promise).map(entry => entry.fields);我想将它作为可观察对象返回，但是如果作为promise返回，我想知道如何在this.contentfulService.getLastByCount(4).map(entry => entry.fields);
在我的component.html中，我在显示一个条目时执行
浏览 0提问于2018-03-13得票数 0
1回答
"read_status":"completed", "price":"100" ]如您所见我在控制器中调用一个函数loadBooks()来获取这个数据，它存储在一个数组myBooks中: any = []；情况是，我们得到的数据可能会改变。不知道这是如何在<
浏览 0提问于2018-05-04得票数 0
我有一个HTMLform页面，我试图在单独的文本框中显示Json数据的数组，但我无法做到so.My组件级别的代码如下：import { Router, ActivatedRoute } from '@angularcontact_Name值，而且如果contact_name中存在逗号
浏览 1提问于2018-06-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
