Angular Typeerror: Cannot read Property '0' of Undefined in Table with 2 ngFor

Asked

Viewed 1,243 times

-1

The list is working perfectly, but I can not understand why the error on the console:

TypeError: Cannot read property '0' of undefined

In the image appear the table, the console and the array grouped by doctor.

I’m new and self-taught and I don’t even know if I used the right method to make this kind of table ...

<table class="table table-hover">
<ng-container *ngFor="let medico of consultas[0]">

    <thead>
        <tr class="bg-primary text-light">
            <th>Medico</th>
            <th>Paciente</th>
            <th>Data Agendada</th>
        </tr>
    </thead>

    <p> <strong> {{medico.nomeMedico}} </strong> </p>

    <tbody>
        <tr *ngFor="let consulta of medico.consultas">
            <td></td>
            <td>{{consulta.nome}}</td>
            <td>{{consulta.dataConsultaFrm}} - {{consulta.horaConsulta}}</td>
        </tr>
    </tbody>

</ng-container>
</table> 

import { Component, OnInit } from '@angular/core';
var _ = require('lodash');

import { Consulta } from 'src/app/models/consulta.model';
import { ConsultaService } from 'src/app/services/consulta.service';

@Component({
  selector: 'app-consultas-listagem',
  templateUrl: './consultas-listagem.component.html',
  styleUrls: ['./consultas-listagem.component.css']
})
export class ConsultasListagemComponent implements OnInit {

  consultas: Consulta[];

  constructor(
      private consultaService: ConsultaService
  ) { }

    ngOnInit() {
        this.consultaService.getConsultas().subscribe( 
            consultas => { 
                var result = _(consultas)
                    .groupBy(x => x.nomeMedico)
                    .map((value, key) => ({nomeMedico: key, consultas: value}))
                    .value();
                this.consultas = Array.of(result);

                console.log(this.consultas);
            }
        );  
    }
}

Tabela (OK), Erro Console e array agrupado

angular
  • 1

    Think a little about me if you’re doing a *for(ngFor) in consultas, so that the index [0]?? You can also read the link to see pq and do not ask and instead insert images: https://pt.meta.stackoverflow.com/questions/5483/manual-de-como-n%C3%83o-fazer-perguntas/5485#5485

  • places the code of your ts as well, I think the problem is that you are not initializing the array as an empty array

  • 1

    puts queries: Consultation[]=[]

  • 1

    Eduardo Vargas, hit the nail on the head !!! Thank you! !!

  • Hello @Alexandre, Do not change the question title to indicate that your problem has been solved. If any community responses helped you consider accept, That’s the best way to thank whoever helped you. If you have found a different answer consider answering your own question, it may help people with the same problem - I can answer my own question?. -- It’s worth taking a look at our [Tour] =D

1 answer

0

Tries to initialize its property as an empty array

consultas: Consulta[] = [];

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.