[英]how to loop the dynamically nested array using ngFor in angular 7
[英]Iterate an array using its length inside a nested ngFor loop - Angular 9
我正在迭代一个对象数组,并且在每个对象内部都有另一个对象数组,其值例如“name”和“id”。 这个对象数组(称为 noticias)具有可变长度。
我需要显示这些值,我只能通过硬编码下面显示的“X”来访问和显示它们。
<div *ngFor="let c of DATA; let i = index;">
{{i}}{{c.name}}
<div *ngFor="let novedad of DATA; let i2 = index; ">
<div *ngIf="i2 === i">
{{novedad.noticias[0][X].name | json}} --> HERE
</div>
</div>
</div>
DATA 数组来自一个服务,该服务使用一系列 http 调用来形成这样的数组。
有没有办法迭代{{novedad.noticias[0][LOOP THROUGH LENGTH OF EACH OBJECT].name | json}}
{{novedad.noticias[0][LOOP THROUGH LENGTH OF EACH OBJECT].name | json}}
?
我希望我的问题是可以理解的。 提前致谢!
JSON object:
[
{
"id": 6,
"name": "Encantamientos",
"forumid": 6,
"courseid": 6,
"type": "news",
"noticias": [
"Este curso no tiene novedades"
]
},
{
"id": 5,
"name": "Historia de la magia",
"forumid": 5,
"courseid": 5,
"type": "news",
"noticias": [
[
{
"id": 9,
"name": "aviso 1",
"groupid": -1,
"timemodified": 1585598111,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 9,
"parent": 0,
"userid": 3,
"created": 1585598111,
"modified": 1585598111,
"mailed": 0,
"subject": "aviso 1",
"message": "<p>aviso1<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
}
]
]
},
{
"id": 2,
"name": "Difusión ",
"forumid": 1,
"courseid": 2,
"type": "news",
"noticias": [
[
{
"id": 8,
"name": "tema difusin 3",
"groupid": -1,
"timemodified": 1585595618,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 8,
"parent": 0,
"userid": 3,
"created": 1585595618,
"modified": 1585595618,
"mailed": 0,
"subject": "tema difusin 3",
"message": "<p>cuerpo tema difusion 3.<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
},
{
"id": 2,
"name": "2",
"groupid": -1,
"timemodified": 1585221896,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 2,
"parent": 0,
"userid": 3,
"created": 1585221896,
"modified": 1585221896,
"mailed": 0,
"subject": "2",
"message": "<p>aviso 2<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
},
{
"id": 1,
"name": "aviso 1",
"groupid": -1,
"timemodified": 1584460837,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 1,
"parent": 0,
"userid": 3,
"created": 1584460837,
"modified": 1584460837,
"mailed": 0,
"subject": "aviso 1",
"message": "<p>aviso 1<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
}
]
]
},
{
"id": 4,
"name": "Quimica",
"forumid": 3,
"courseid": 4,
"type": "news",
"noticias": [
[
{
"id": 7,
"name": "aviso quimica 3",
"groupid": -1,
"timemodified": 1585324962,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 7,
"parent": 0,
"userid": 3,
"created": 1585324962,
"modified": 1585324962,
"mailed": 0,
"subject": "aviso quimica 3",
"message": "<p>cuerpo aviso quimica 3<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio basti",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
},
{
"id": 5,
"name": "quimica aviso 2",
"groupid": -1,
"timemodified": 1585241926,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 5,
"parent": 0,
"userid": 3,
"created": 1585241926,
"modified": 1585241926,
"mailed": 0,
"subject": "quimica aviso 2",
"message": "<p>quimica aviso 2</p><p><br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
},
{
"id": 3,
"name": "aviso quimica 1",
"groupid": -1,
"timemodified": 1585232670,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 3,
"parent": 0,
"userid": 3,
"created": 1585232670,
"modified": 1585232670,
"mailed": 0,
"subject": "aviso quimica 1",
"message": "<p>contenido del posteo quimica 1<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
}
]
]
}
]
不确定我是否完全理解你,但你应该能够做到:
<div *ngFor="let c of DATA; let i = index;">
{{i}}{{c.name}}
<ng-container *ngFor="let inner of c.noticias">
<div *ngFor="let novedad of inner">
{{novedad.name | json}}
</div>
</ng-container>
</div>
ngFor
你的DATA
数组,然后在每个数组中, ngFor
在noticias
数组上,然后再次在内部,因为它是 arrays 的数组。
<div *ngFor="let c of outerArray; let i = index;">
{{i}}{{c.name}}
<div *ngFor="let novedad of c.innerArray; let i2 = index; ">
<div *ngIf="i2 === i">
{{novedad.noticias[i2].name | json}} --> HERE
</div>
</div>
</div>
根据概念和基本原理,它应该是这样的。 否则取决于您的响应数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.