Итерируйте массив, используя его длину внутри вложенного ngFor l oop - Angular 9 - PullRequest
Новая
       8

Итерируйте массив, используя его длину внутри вложенного ngFor l oop - Angular 9

0 голосов
/ 15 апреля 2020

Я повторяю массив объектов, и внутри каждого из этих объектов есть еще один массив объектов со значениями, такими как «имя» и «идентификатор». Этот массив объектов (называемых 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
        }
      ]
    ]
  }
]

Ответы [ 2 ]

2 голосов
/ 15 апреля 2020

не уверен, что я вас полностью понимаю, но вы должны просто сделать: 

<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 массив, а затем еще раз по внутреннему, так как это массив массивов.

1 голос
/ 15 апреля 2020 
<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>

В соответствии с концептуальным и фундаментальным, так должно быть. В противном случае зависит от ваших данных ответа.

...