colección de acceso en una interfaz en angular 8

votos
0

Tengo la siguiente interfaz

export interface  MenuItem { 
    nombre: string;
    url: string; 
    imgUrl: string;

    hijos : MenuItem[];

}

Con los datos:

[
    {
        nombre: General,
        url: #,
        hijos: [
            {
                nombre: Sucursales,
                url: sucursales,
                hijos: []
            },
            {
                nombre: Distritos,
                url: distritos,
                hijos: []
            }
        ]
    },
    {
        nombre: Seguridad,
        url: #,
        hijos: [
            {
                nombre: Empleados,
                url: empleados,
                hijos: []
            }
        ]
    }
]

El problema que tengo es que quiero acceder a la colección anidada y me tira un error.

<div>
    <p *ngFor=let grupoItem of menuItems>{{ grupoItem.nombre }}</p>
    <ul>
        <li *ngFor=let menuItem of grupoItem.hijos>
            <a routerLink={{ menuItem.url }}>{{ menuItem.nombre }}</a> -->
        </li>
    </ul>
</div>

el error es: No se puede leer la propiedad 'Hijos' de la indefinida

El error está en la línea:

<li *ngFor=let menuItem of grupoItem.hijos>

¿Cómo accedo a la colección 'Hijos'?

Agradezco tu ayuda de antemano.

Publicado el 09/10/2019 a las 19:00
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
3

Segundo bucle no estaba dentro primero. Cambiar la plantilla a éste:

<div>
    <div *ngFor="let grupoItem of menuItems">
    <p>{{ grupoItem.nombre }}>/p>
    <ul>
        <li *ngFor="let menuItem of grupoItem.hijos">
            <a routerLink="{{ menuItem.url }}">{{ menuItem.nombre }}</a> -->
        </li>
    </ul>
    </div>
</div>
Respondida el 09/10/2019 a las 19:05
fuente por usuario

votos
0

Parece que usted está tratando de acceder a los datos fuera de la ngFor. Trate de código actualizado a continuación:

<div *ngFor="let grupoItem of menuItems">
  <p>{{ grupoItem.nombre }}</p>
  <ul>
      <li *ngFor="let menuItem of grupoItem.hijos">
          <a routerLink="{{ menuItem.url }}">{{ menuItem.nombre }}</a> -->
      </li>
  </ul>
</div>
Respondida el 09/10/2019 a las 19:06
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more