在嵌套的 ngFor 循环中使用数组的长度迭代数组 - Angular 9

Question

我正在迭代一个对象数组，在每个对象内部都有另一个对象数组，其值例如 "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}}？

我希望我的问题是可以理解的。提前致谢！

JSON 对象：

    [
  {
    "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
        }
      ]
    ]
  }
]

Answer 1

不确定我是否完全理解你，但你应该能够做到：

<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 数组上，然后再次在内部，因为它是一个数组数组。

Answer 2

<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>

从概念上和根本上来说，应该是这样的。否则取决于您的响应数据。

在嵌套的 ngFor 循环中使用数组的长度迭代数组 - Angular 9

Iterate an array using its length inside a nested ngFor loop - Angular 9

javascript

arrays

angular

typescript

ngfor