*ngfor array to ion-list in ion 2
ngFor是Angular框架中的一个指令，用于在模板中循环遍历数组或对象，并生成相应的HTML元素。在Ionic 2中，ngFor可以用于在ion-list组件中循环渲染ion-item元素。
ion-list是Ionic框架中的一个组件，用于显示一个可滚动的列表。它可以包含多个ion-item元素，每个ion-item代表列表中的一个项。
在使用ngFor将数组绑定到ion-list时，需要在模板中使用ng-container元素来包裹ion-item元素，并使用ngFor指令来指定要循环遍历的数组和定义一个临时变量来表示当前循环的元素。
下面是一个示例代码：
<ion-list>
<ng-container *ngFor="let item of items">
<ion-item>
{{ item }}
</ion-item>
</ng-container>
</ion-list>在上面的代码中，items是一个数组，*ngFor指令会将数组中的每个元素依次赋值给item变量，然后生成对应的ion-item元素。
*ngFor的优势是可以方便地循环遍历数组或对象，并生成重复的HTML元素，减少了手动编写重复代码的工作量。
适用场景：
- 当需要显示一个由数组或对象数据生成的列表时，可以使用*ngFor和ion-list组件。
- 当需要根据动态数据生成多个相同或类似的HTML元素时，也可以使用*ngFor指令。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
相关·内容
我是ionic 2的新手。我创建了一个数组，然后我想将该数组循环到ion-listimport { Component } from '@angular/core'; var menu: any[] = [ "menu 2",
"men
浏览 19提问于2017-08-21得票数 3
回答已采纳
2回答
我有一个API，里面有几个值。我想使用标签之类的东西在屏幕上向用户显示这些值。如何向用户显示句子中每个对象最新和最长信息？比如：“你的位置是：+ ..value.. + lat和+ ..value.. + long
浏览 11提问于2017-01-22得票数 0
1回答
我想要创建一个页面，它将被分成两个部分(上、下)，我希望在这两个部分上显示项(为了简单-列表条目)，每次单击项目时，我希望它移动到屏幕的另一部分。考虑到未来，我希望这两个部分都可以滚动。谢谢。
浏览 0提问于2016-11-25得票数 0
回答已采纳
我将值存储在两个数组中，以便在单个ion-list中迭代。Billerstatusstate和Billerstatusnamelst是两个数组。我已经尝试了以下迭代 <ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst ">
</<em
浏览 17提问于2016-06-29得票数 7
回答已采纳
NavController } from 'ionic-angular'; this.newsList = this.database.list('news');
<ion-nav
浏览 14提问于2019-01-17得票数 0
3回答
<ion-list> <span *ngClick="showDevice(device)">{{ device }} </ion-item>错误报告是ngClick is not a property of span
浏览 0提问于2018-01-25得票数 1
回答已采纳
1回答
数据源是一个三维javascript对象.值显示OK，但我无法始终在新行上显示所有项(v1、v2和v3)。我不是这方面的专家，所以我可能遗漏了一些显而易见的东西。这怎么可能是最简单的方法呢？<ion-content> <ion-item *ngFor="let v1 of this.values1">
{{v1.name1}}<ion-item *ngFor=&q
浏览 0提问于2019-08-12得票数 0
回答已采纳
2回答
{"articles":[{"articleId":"2665","articleName":"<\/head>Parental leave<\/body><\/html>"}]}
<ion-item button detail lines="inset" *ngFor="let film of
浏览 0提问于2019-06-19得票数 0
回答已采纳
2回答
; err => { } }
我的HTML <ion-navbar> Person </ion-navbar>
<&
浏览 1提问于2018-05-24得票数 0
回答已采纳
2回答
我正在将一个项目从Ionic 3.2版迁移到5.4版，我遇到了一个问题:当我将一些项放入ion-item中时，它们会将行划分为多个列，而不是跳到下一行 <ion-item class="item-text-wrap" (click)="selEnt(ent)">
<h2>{{ ent.nome }}</
浏览 8提问于2020-05-12得票数 1
1回答
： Re-evaluation: [{name: "Joe Smith2}, {name: "Jane Doe2"}], Testing: [{name: "在我看来：
<ion-list&g
浏览 1提问于2017-05-24得票数 6
回答已采纳
1回答
<div *ngFor="let item of items"> <ion-item > </ion-item&
浏览 1提问于2017-04-20得票数 4
回答已采纳
1回答
this.Ecvideos = ytdata; }, err => { });}<ion-item *ngFor="let Ecvideo of Ecvideos">
<h2> ***this doesn't display**
浏览 2提问于2018-05-27得票数 0
回答已采纳
1回答
我在array中有数据，其中每个元素代表父对象，每个父对象都有items数组，其元素是子元素。我必须在HTML父母列表+嵌套子列表下生成每个父级的列表。每个子元素都是可点击的(导航到另一个页面)。我可以使用*ngFor迭代第一级元素(父元素)，并使用ion-list和ion-item，但是如何嵌套子元素呢？
浏览 3提问于2018-07-10得票数 0
我需要基于数组呈现ion-item元素。我需要在ngFor循环中设置背景颜色，背景颜色来自数组中的每个值。有什么想法吗？ 我试过这样的东西。但它不起作用 <ion-list *ngFor="let shift of shifts">
<ion-item [style.--background]="'shift.color'">{{ shift.color }} qwe</ion-
浏览 32提问于2019-10-14得票数 0
1回答
我有一个包含文本和单选按钮的嵌套列表，但在Ionic 2中没有显示。 <ion-item *ngFor="let opl of Opls">
<ion-item*ngFor="let q of opl.Questions" clas
浏览 1提问于2017-03-02得票数 1
回答已采纳
2回答
public navCtrl: NavController, public http: Http) { .map(res => res.json()) this.posts = data.results;}<ion-content>
<io
浏览 3提问于2017-06-27得票数 1
回答已采纳
2回答
模板 <ion-list *ngFor="let log of logList|orderBy: order; let i=index"> <p>Log entries: <b>{{log[i].sub}}</b></p> </ion-list>
浏览 3提问于2020-08-05得票数 0
1回答
我有一个带有选择的模式来过滤区域。打开模型时，我选择区域并显示该区域的数据，因此我希望将数据发回第一页。我认为我做得对，因为在控制台上我看到了过滤过的数据，但是我不知道如何在第一页的HTML中显示。有人能帮我吗？我不知道我到底需要做什么。 export class FiltrosModalPage implements OnInit { regiao: any; myParam: string;
pro
浏览 1提问于2018-10-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
