2

Possuo o seguinte array chamado dadosRelatorio que preciso de iterar no meu template, esse array eu consigo através de uma requisição do meu backend.

[{"id": 1,
  "name": "a",
  "class":[{
     "Inglês":[{
        "id": 1,
        "code": "teste"
     },
     {
        "id": 2,
        "code": "teste 2"
     }],
     "Espanhol":[{
        "id": 1,
        "code": "a"
     }]
   }]
}]

Como eu posso iterar os objetos dentro de class se eles possuem diferentes nomes? Ocasionalmente pode vir "Inglês", ocasionalmente "Espanhol", dentre outras linguas.

Geralmente eu faço o *ngFor passando o nome do objeto, mas nesse caso eu nao sei o nome do objeto porque ele varia:

<div *ngFor="let aluno of dadosRelatorio" class="div-aluno">
       <span>Aluno: {{ aluno.name }}</span>
       <div *ngFor="let classe of aluno.class">
          <div *ngFor="let idioma of classe. ???>

          </div>
       </div>
</div>
1
  • 1
    ai voce tem que mappear seu array para as chaves deles serem uma propriedade Commented 14/02/2020 às 17:56

2 Respostas 2

2

Você pode utilizar o KeyValuePipe para ler as propriedades do objeto e fazer uma iteração. Veja o exemplo abaixo:

Classe:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dadosRelatorio = [{
    id: 1,
    name: "a",
    class: [{
      'Inglês': [{
        id: 1,
        code: "teste"
      }, {
        id: 2,
        code: "teste 2"
      }],
        Espanhol: [{
          id: 1,
          code: "a"
        }]
      }
    ]
  }];
}

Template:

<div *ngFor="let aluno of dadosRelatorio">
  <span>Aluno: {{ aluno.name }}</span>
  <div *ngFor="let classItem of aluno.class">
    <div *ngFor="let idioma of classItem | keyvalue">
      {{idioma.key}}
      <div *ngFor="let item of idioma.value">
        {{item.id}} - {{item.code}}
      </div>
    </div>
  </div>
</div>

Resultado:

Aluno: a
Espanhol
1 - a
Inglês
1 - teste
2 - teste 2
1
  • Funcionou bem dessa forma Commented 14/02/2020 às 19:24
0

Você precisa pegar a chave do objeto, no Angular você pode utilizar o Object.keys. Tente fazer algo mais ou menos assim.

    Component({
    selector: 'app-myview',
    template: `<div *ngFor="let aluno of dadosRelatorio" class="div-aluno">
                    <span>Aluno: {{ aluno.name }}</span>
                    <div *ngFor="let classe of aluno.class">
                        <div *ngFor="let idioma of objectKeys(classe)">
                            {{idioma + ' : ' + classe[idioma]}}
                        </div>
                    </div>
                </div>`
    })

export class MyComponent {
    objectKeys = Object.keys;
    items = [
        {
            "id": 1,
            "name": "a",
            "class":[
                {
                    "Inglês":[
                        {"id": 1,"code": "teste"},
                        {"id": 2,"code": "teste 2"}
                    ],
                    "Espanhol":[
                        {"id": 1,"code": "a"}
                    ]
                }
            ]
        }
    ]
    constructor(){}
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .