[英]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>
根據概念和基本原理，它應該是這樣的。 否則取決於您的響應數據。
如何在 angular 7 中使用 ngFor 循環動態嵌套數組
[英]how to loop the dynamically nested array using ngFor in angular 7
如何使用angular2在* ngFor內部使用循環數組中mapbox的內容
[英]How to loop the contents of mapbox in an array using angular2 to use inside *ngFor
angular 數組循環使用 ngFor 獲取數組計數並顯示值
[英]angular array loop using ngFor get array count and display the value
如何在Angular中使用ngFor獲取嵌套對象數組的選定值？
[英]How to get selected value of nested object array using ngFor in Angular?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.