如何使用ngFor angular在对象内部迭代数组内容
ngFor是Angular中的一个内置指令，用于在模板中迭代数组内容。通过ngFor，我们可以遍历对象中的数组，并在模板中动态生成相应的HTML元素。
使用ngFor指令的语法如下：
<element *ngFor="let item of array; let i = index">
{{ item }}
</element>其中，array 是我们要迭代的数组，item 是数组中的每个元素，i 是当前元素在数组中的索引。在上述示例中，我们使用了插值表达式 {{ item }} 来显示每个元素的值。
除了基本的迭代功能，ngFor还提供了一些其他的特性：
- 可以使用
index关键字来获取当前迭代的索引值。 - 可以使用
odd和even关键字来判断当前迭代是否是奇数或偶数。 - 可以使用
first和last关键字来判断当前迭代是否是第一个或最后一个。 - 可以使用
ngForOf指令和trackBy函数来提高性能。ngForOf可以接收一个数组或可迭代对象作为输入，并且可以自动更新模板中的内容。trackBy函数可以帮助Angular在重新渲染时更好地识别数组中的每个元素。
以下是使用ngFor的一些应用场景：
- 在一个评论列表中显示多条评论。
- 在一个产品列表中展示多个产品。
- 动态生成导航菜单。
- 显示搜索结果列表。
在腾讯云中，与ngFor相关的产品包括：
- 腾讯云云函数（SCF）：用于在云端运行代码逻辑，可以处理请求并返回结果。
- 腾讯云云数据库 MySQL版（CMQ）：用于存储和管理数据。
- 腾讯云云存储（COS）：提供了存储和访问大规模数据的能力。
你可以通过以下链接了解更多关于这些产品的详细信息：
- 腾讯云云函数：https://cloud.tencent.com/product/scf
- 腾讯云云数据库 MySQL版：https://cloud.tencent.com/product/cmq
- 腾讯云云存储：https://cloud.tencent.com/product/cos
相关·内容
我有products-list.component.html模板和使用*ngFor指令的模板。我在products-list.module.ts中使用CommonModule，在app.module.ts中使用BrowserModule一次，如果是正确的话，使用ngFor。仍然提供“无法绑定到'ngForOf‘，因为它不是'div’(在'ProductsListComponent‘组件模板中使用)的一个已知属性”错误。当我试图向我的应用程序添加延迟加载时，问题就开始了。
products-list.component.html
<app-navbar>&
浏览 13提问于2022-07-26得票数 -2
.html
<ion-select-option value="t.result[i].id" *ngFor="let t of (issueTypes$ | async); let i = index ">
{{t.result[i].name}}
</ion-select-option>
.ts
this.issueTypes$ = this.maintenanceService.get();
邮差：
{
"result": [
{
"
浏览 0提问于2019-03-05得票数 1
回答已采纳
我正在NgFor中填充组件NgFor
<section
class="plContactCreation-listItem"
*ngFor="let contact of contacts$ | async; index as idx"
>
<contact-updatable-item
[contact]="contact" // This line will not work
>
</contact-
浏览 1提问于2019-06-19得票数 1
使用ngFor -角4时发生错误
当我执行这个函数时，有人知道如何知道为什么这个错误会显示在控制台上吗？
正在显示数据，但仍会显示此错误。
empresas = <Empresa> {};
constructor(private service: Service) { }
ngOnInit() {
this.service.getEmpresas().subscribe((res) => {
this.empresas = res
})
}
模板
<tr *ngFor="let empresa of empresa
浏览 11提问于2017-09-07得票数 1
回答已采纳
2回答
我是事件绑定的新手，我不明白为什么以及如何在()中传递一个值以及它的值是如何加载的。我正在关注Angular 的哪个部分
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
哪里
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
我不知道(英雄)是从哪里来的，也不知道如何加载哪些数据
浏览 0提问于2018-01-01得票数 0
在这种情况下，我从数据库接收数据对象，其中包含文件版本的记录。可能有5个版本(5个记录)或一个版本返回。
我的问题是，我使用ngFor循环数据数组并将它们打印到表中。如果只返回一个记录，则数据不再是对象数组，而只是单个对象。
<tbody class="ruleVersions">
<tr *ngFor="let m of mapData.ruleVersion.x">
<td class="small">V {{ m.RuleVersion }}.0</td>
<td [inner
浏览 2提问于2017-08-09得票数 2
回答已采纳
1回答
嗨，我想要实现的是在ngFor中具有动态值的ngFor，这有可能吗？我也尝试在它里面使用ngModel，但是它没有成功。以下是我所做的：
在我的home.component.ts中：
import { Component, OnInit } from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
export interface Condition {
value: string;
viewValue: string;
}
e
浏览 5提问于2019-10-03得票数 1
回答已采纳
1回答
显示角度为2的二维关联阵列
、、、、
我想要显示我的2D关联数组，但是我不太了解angular 2在HTML中的语法。有人能帮帮我吗？
我的关联数组：
parents = [
parent1:[child1,child2,child3],
parent2:[child4,child5],
parent3:[child6]
];
在我的.html中，我希望有这样的东西：
<div *ngFor="let parent of parents">
{{parent name}}
<div *ngFor="let child o
浏览 0提问于2016-06-10得票数 0
11回答
在使用angular2迭代对象时，我对如何在*ngFor中获取对象的key和value感到有点困惑。我知道在angular 1.x中有这样的语法
ng-repeat="(key, value) in demo"
但我不知道如何在angular2中做同样的事情。我也尝试过类似的方法，但没有成功：
<ul>
<li *ngFor='#key of demo'>{{key}}</li>
</ul>
demo = {
'key1': [{'key
浏览 124提问于2016-02-21得票数 579
回答已采纳
2回答
从API (角)获取数据
、、、、
我需要通过提交按钮从API获取数据。
这是url -*
*是输入的值。
这是API的响应。
{
"total": 1,
"result": [
{
"category": null,
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "cq6hLP0ETeW4VSrm7SYg5A",
"url&
浏览 0提问于2018-07-31得票数 1
回答已采纳
我有一个父组件：
<div *ngFor="let slice of slices">
<my-slice [slice]="slice">
</div>
和儿童部分：
export class SliceComponent implements OnChanges {
@Input()
slice: Slice;
...
}
如果我在父组件中运行以下代码，子组件将不会被更新，尽管视图顺序确实会改变。
let slice = this.slices[0];
this.slices
浏览 2提问于2016-08-03得票数 1
我有一个JSON文件，其中包含待售属性的列表。我正在尝试使用*NgFor遍历数据来创建一个列表。
首先，我对angular和应用程序开发仍然是一个业余爱好者，所以有可能我误解了文档等
我尝试过通过不同的路径进行循环
*NgFor="let post of posts.properties"
*NgFor="let post of posts.properties.property"
但仍然会出现各种错误。
我的理解是，我必须将可观察对象转换为一组属性。然后将其绑定到html。(我认为我所做的属性是数组类型？
json
{
"properties&
浏览 0提问于2019-04-04得票数 0
当我使用下面的代码时，我得到了这个错误：
找不到“object”类型的不同支持对象“object object”。
在执行嵌套ngFor时，有什么方法可以解决这个问题吗？
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id="results">
<div *ngFor="let mem of members">
浏览 2提问于2017-05-04得票数 12
回答已采纳
我有一个组件从资产中加载本地json文件(仅包含名称)，folder.Since HttpClient负责将数据格式化为json，因此这里不使用map。
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'
export type cont= {name
浏览 1提问于2019-01-04得票数 4
1回答
我对angular是个新手。我只是在学习。我想用ngFor绑定数据。但它没有显示任何数据。请帮我解决这个问题 html文件： <tbody class="text-center">
<tr *ngFor="let agent of agentlist ;let i = index">
<td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
浏览 32提问于2021-07-29得票数 1
2回答
我从套接字接收到一个对象，我想使用*ngFor将它打印到屏幕上。我在控制台中看到以下错误
角度ts
ngOnInit() {
console.log('ngOnInit');
this.socket.on('online',(people:number)=>{
console.log('online:',people);
})
this.socket.on('message',(data:any)=>{
console.log('socket-emit:',data);
})
this.sock
浏览 0提问于2019-01-28得票数 1
2回答
在模板中显示json数据
、、、
我想知道是否有人能帮我显示我的数据。
我有一个自定义提供程序，它调用我的API，这些API都很完美。
我正在使用的页面是“page”，我的playing.ts文件如下所示
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PlayingService } from '../../providers/playing-service/playing-service';
@Component({
te
浏览 4提问于2016-08-11得票数 1
回答已采纳
在Angular 2模板中，有没有一种方法可以迭代静态(Typescript)类的属性？换句话说，我想要一个for/in循环，它迭代对象而不是数组(所以普通的*ngFor不起作用)。据我所知，在Angular 2中没有这样做的指令，所以我想知道最好的方法是什么？
由于模块导入的原因，对象必须作为静态类引入，并且数据必须导入，然后在另一个Angular组件的模板中迭代。
静态类如下所示：
class staticClassExample {
static string1 = ""
static string2 = ""
static string3 =
浏览 4提问于2017-07-14得票数 0
我试图从这个站点 (随机玩笑)中获取JSON格式的数据，但是我得到了一个错误: Error:无法找到类型为“object”的不同的支持对象'object‘。NgFor只支持绑定到诸如数组之类的Iterable。和"DebugContext_ {view: Object，nodeIndex: 11，nodeDef: Object，elDef: Object，elView: Object}“
我是routing.ts
import { Injectable } from '@angular/core';
import { Http } from '@angu
浏览 5提问于2017-05-25得票数 0
回答已采纳
我有一个Angular2 (2.4.0)应用程序，它在ngFor循环中显示一个列表，我注意到每次移动鼠标时，列表都会重新呈现。有没有其他人注意到类似的行为和/或知道为什么是这样的？
正在重新呈现的表：
<table class="responsive-table bordered highlight">
<tbody>
<tr *ngFor="let person of getPersons()">
<td>{{person.name}}</td>
</tr>
浏览 0提问于2017-01-13得票数 0
3回答
角8嵌套对象插值
、、、、
这是我的角度CLI的版本：
Angular CLI: 7.3.9
Node: 12.2.0
OS: win32 x64
Angular: 8.0.2
在创建角8应用程序时，我尝试使用与以下对象对应的嵌套FormGroups：
const Boilerplate: any = {
1: {
desc: "section1",
content: {
1: "question 1.a:",
2: "question 1.b:",
3:
浏览 3提问于2019-06-26得票数 3
回答已采纳
我是Angular的新手，我只是想知道是否可以在不使用let项的情况下使用ngFor指令；让i= index语法 在使用ngFor迭代数组时，有没有其他方法可以获得索引 我的示例应用程序 <div *ngFor="let oddNumber of oddNumbers; let i = index">
<app-odd *ngIf="oddNumbers[i]" [number]="oddNumbers[i]"></app-odd>
<app-even *ngIf="evenNumb
浏览 34提问于2020-08-29得票数 0
我正在尝试为一组相同的输入使用*ngFor，但输入应该绑定到的属性除外。 <mat-form-field *ngFor="let prop of [ID, Name, Nickname]">
<input matInput type="text" placeholder="prop.key" #propInput [(ngModel)]="prop">
<button mat-icon-button matSuffix mat-icon-button *ngIf="propI
浏览 25提问于2019-09-27得票数 1
回答已采纳
3回答
我需要在for中分配两个变量。在Angular 5+中类似这样的内容
<div *ngFor="let a of apple, let b of ball">
<a [routerLink]="['/ball',b]">
{{a}}
</a>
</div>
有什么建议吗？
提前感谢您的帮助。
浏览 0提问于2018-10-04得票数 5
3回答
我正在第一次使用Range6进行一个项目，我正在创建一个应用程序，该应用程序从一个在线URL中获取JSON数据，列出HTML页面上的每个条目。每个条目都有一个可变的键值，并与一个变量数组配对。问题是，尽管没有显示任何错误，但*ngFor语句没有显示任何条目，但{{ ngFor}显示数据已成功返回。这是我的密码。
api-retrieval-service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpResponse} from '@a
浏览 1提问于2018-10-02得票数 1
回答已采纳
我得到跟随错误时，迭代一个项目的列表，并显示在页面上的Ionic 3，Firebase和角。
到DB的连接工作正常，因为我能够成功地将todo项添加到DB中。页面上的项目列表是问题所在。
错误：
core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
浏览 0提问于2018-11-18得票数 0
3回答
实际上，我想将显示到一个表中。这里，数据是{object object}。我想要显示所有货币的“最后”，“买入”和“卖出”的所有值。我可以编写复杂的代码，但我想通过使用ng-repeat或ngFor来减少代码行。如何写出这样的条件呢？
我用的是Angular 4。
浏览 0提问于2017-08-17得票数 1
回答已采纳
4回答
我正在学习Angular2，所以如果我问了一个愚蠢的问题，请原谅我。我正在接收一个对象数组，它看起来如下：
obj.json
data: [
{
item: "banana"
}
],
[
{
item: "apple"
}
],
[
{
item: "lemon"
}
]
在我的组件文件中，我设法将它限定在一个作用域中：
this.fr
浏览 6提问于2017-02-22得票数 8
回答已采纳
2回答
我正在学习本教程：
下面是我的系统信息(您可以看到我正在使用Ionic 3)：
$ ionic info
cli packages: (C:\Users\Hatuey\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
local packages:
@ionic/app-scripts : 2.1.4
Ionic Framework : ionic-angular 3.6.0
System:
Node : v6.1
浏览 5提问于2017-09-01得票数 1
回答已采纳
2回答
我在一个Ionic2 / Angular2项目中工作。我有一个
*ngFor="let item of items | async | customPipe"
在我的密码里。Observable<Item[]>.异步是因为items是一个items。我的customPipe在第一次运行时运行良好。但是当我对其中一个做任何更改时，如果通过我的customPipe过滤掉它的项目，它仍然会显示出来。
有什么问题吗？*ngFor只运行一次吗？还是我要强制更新DOM？谢谢你的帮助。
浏览 2提问于2016-12-16得票数 1
我正在尝试访问名为eatGroups的本地主机8080上的API：
我在一个Angular8前端得到了这个错误：
component.html文件看起来像
<li *ngFor="let eatGroup of eatgroupService">
{{ eatGroup.name }}
</li>
component.ts看起来像：
import { Component, OnInit } from '@angular/core';
import { EatgroupService} from "../
浏览 1提问于2019-12-15得票数 0
回答已采纳
6回答
我想要实现UI矩阵模式，它应该动态生成。通过接收输入参数，它应该决定什么是UI矩阵模式维度:例如9X3元素：
我使用Angular2.js，打字记录，SCSS。
和.ts看起来：
import {Component, Input, OnInit} from 'angular2/core';
import {NgFor} from 'angular2/common';
@Component({
selector : 'game-pattern',
moduleId : module.id,
templateUrl: '
浏览 13提问于2016-04-14得票数 7
2回答
使用* v5访问数组对于角度v5
、、、、
我在Firebase中有一些JSON数据，我正尝试在Angular v5中使用*ngFor循环这些数据。
该对象如下所示：
{
"events": [
{
"Event-time": "09:30",
"Event-name": "Morning Session",
"Location": "Alexander Room",
"Speaker-image&#
浏览 7提问于2018-01-11得票数 1
回答已采纳
我坚持这个错误错误:找不到一个不同的支持对象‘对象’类型' object‘。NgFor只支持绑定到诸如数组之类的Iterable。
我试图从API中获取数据，但它显示了这个错误，因为我仍然在学习角度，请指导我如何处理此类错误。
metadata-service.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
浏览 2提问于2020-12-24得票数 1
2回答
我有rest，它返回JSON响应。如何将这些数据绑定到角度2中查看？
[{"lapID":"3445656"},{"lapID":"374657"},{"lapID":"375555"},{"lapID":"3445657"},{"lapID":"3445659"}]
我想在视图中显示这些in。我试着用ngFor directive.<div *ngFor="let lap of lapIDS">{{lap.
浏览 0提问于2017-03-22得票数 1
回答已采纳
起初我遇到了cors问题，我设法解决了它，但现在我得到了以下错误。错误错误:找不到类型为' object‘的不同支持对象'object Object’。NgFor仅支持绑定到迭代对象，如数组。
这是我的服务
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthServ
浏览 0提问于2020-11-30得票数 0
我查看了董事会和许多网站，但找不到解决我的问题。
这个问题已经讨论过了，但似乎对我的代码没有任何作用。所以!首先，我的中间件生成的JSON如下所示：
{
"uuid": "5c5260ec-5bcd-451a-ad68-57eb9572c185",
"latitude": 41,
"longitude": 1,
"temoin": {
"numeroDeTelephone": 342391,
"nom": "bruce",
&#
浏览 1提问于2017-04-11得票数 0
我正在尝试为两个ngFor迭代器设置trackBy，这两个迭代器之前会导致加载问题，因为我在ngFor中有row.getRows()，所以显著减慢了应用程序的速度。我将其更改为仅在组件初始化中检索行，并修复了问题，不再在每次ngFor呈现时处理数组。
现在我需要更新一个在mousemove事件中频繁出现的单元格属性isSelected，它可能会导致同样的缓慢加载延迟效应。我认为只有在单个属性更改时才呈现DOM元素才能修复它，那么如果单元格的isSelected属性更改，我如何才能仅呈现单元格/td呢？
<tr *ngFor="let row of rows">
浏览 1提问于2019-08-25得票数 0
1回答
基本上，我将数据作为对象存储在JSON文件中，格式如下：
{
"name": {
"source1": ____,
"source2": ____,
"source3": ____
},
"xcoord": {
"source1": ____,
"source2": ____,
"source3": ____
}
}
我使用 (转到“执行多个
浏览 0提问于2016-07-26得票数 0
回答已采纳
2回答
由于我刚接触到角度，我无法在我的component.html页面上显示数据。我可以观察到，但无法在页面上显示出来。它显示了错误:无法找到“Prabu”类型的不同支持对象“对象对象”。NgFor只支持绑定到控制台上的数组等Iterable。错误。请帮帮忙。提前谢谢。
角：
import { AngularFireDatabase } from '@angular/fire/database';
export class AppComponent {
author$;
constructor(db: AngularFireDatabase) {
浏览 0提问于2019-08-29得票数 0
回答已采纳
1回答
我刚刚从angular4开始，遇到了一个概念性问题。async管道(在本例中与*ngFor结合使用)是用来订阅可观察的，并取消手动订阅。看看网上的例子：
案例1:绑定到包含单个项目(如Observable<User> )的可观察到的
案例2:绑定到包含诸如Observable<User[]>之类的项数组的可观察到的
案例3: 1和2随主题、承诺或BehaviourSubject的变化
(例1单项：)
(例2数组：)
从概念上讲，我得到的是ngFor在可枚举上的迭代，并且我假设枚举是从Observable发出的项，而不是可观察的本身。
那么，*ngFor=“让用户使用”只
浏览 3提问于2017-09-12得票数 0
嘿，我在商店中有对象，我想在模板中查看该对象。 我的Ts文件： import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { Comment } from '../../models/comment.model';
import { User } from '../../models/user.model';
im
浏览 7提问于2019-12-13得票数 1
回答已采纳
提前感谢您的帮助。
我在使用服务从angular类格式化我的表格时遇到了问题。
将显示我的表格，但它们在每个单元格之间包含逗号(，)。我想坐上那辆车。
在HTML中
<table>
<thead>
<tr>
<th>Period</th>
<th *ngFor="let m of types.Testing">
{{m.colors}}
</th>
</tr>
</thea
浏览 27提问于2018-07-12得票数 -1
回答已采纳
4回答
我是新的角，我正在调用rest并成功地获得响应，但是我无法在我的html文件中通过ngFor迭代这个响应。
这是我的component.ts文件
import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/reg.service';
@Component({
selector: '<app-users>',
templateUrl: 'users.component.html'
浏览 0提问于2019-05-24得票数 1
回答已采纳
5回答
有什么方法可以在Angular2中将变量传递给模板吗？
假设我有以下代码：
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner"</ng-container>
</div>
---------------
<ng-template #inner>
{{ foo.name }}
</ng-template>
如何获得打印name of foo的模板？
浏览 5提问于2017-05-01得票数 27
回答已采纳
Angular2 rc.6
在json数据上运行循环时，我会得到以下错误
core.umd.js:5995异常:应用程序/模块/mbs/components/menu.html中的错误:5:4是由:无法找到“object”类型不同的支持对象“对象”引起的。NgFor只支持绑定到诸如数组之类的Iterable。
我的html循环，Note：我只是想在响应中迭代属性和数组。
<li *ngFor="let item of menuItems">
{{item}}
</li>
我的服务方法
getMenuItems():Promise<any>{
浏览 2提问于2016-09-15得票数 16
回答已采纳
12回答
我正在尝试在Angular 2Alpha28中做一些事情，并且在使用字典和ngFor时遇到了问题。
我在TypeScript中有一个界面，如下所示：
interface Dictionary {
[index: string]: string
}
在JavaScript中，这将转换为一个对象，其数据可能如下所示：
myDict={'key1':'value1','key2':'value2'}
我想对此进行迭代，并尝试以下内容：
<div *ngFor="(#key, #value) of myDict
浏览 121提问于2015-07-18得票数 149
回答已采纳
2回答
无法从对象服务中获取对象名称
、、、、
我有个问题，我想试着从数据库里得到一些数据。我收到数据，但我不能显示它，因为它是对象而不是字符串。我怎样才能把这些对象放入字符串，我已经尝试了一些安静的东西，但似乎什么都不起作用。
Component.ts
this.artistitems = af.database.object('/users/'+this.artistid, {preserveSnapshot: true});
this.artistitems.subscribe(snapshot => {
this.artistvalues = snapshot.val();
t
浏览 3提问于2016-11-10得票数 2
回答已采纳
1回答
我试图在html table的每个td子组件中动态创建一个组件，我创建了一个table组件，如下所示(在app.component.html中) <div class="container">
<table class="table">
<thead>
<tr>
<th scope="col" *ngFor="let column of columns">{{column}}</th>
&
浏览 21提问于2019-12-19得票数 0
回答已采纳
我知道这似乎是一个非常简单的问题，但我被困在这一点上，需要一些帮助.Trying来创建一个网站使用角度2-我有数据，我可以在控制台日志中看到，但当我试图通过超文本标记语言页面-Nothing来了。
这是我的users.component.html页面
import { Component, OnInit } from '@angular/core';
import{FirebaseService} from '../../services/firebase.service';
@Component({
selector: 'app-users
浏览 0提问于2017-10-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
