Recibo datos JSON de una API que también tiene algunos objetos secundarios. La API tiene un nivel de menú y, en el menú, está comiendo. Lo que quiero hacer es mostrar las comidas relacionadas con cada menú debajo del menú

JSON de API

[{"id":6,"name":"Menu 1","serveDate":"2019-05-10","meals":[{"id":13,"name":"Rice with Stew","description":"rice","image":"","mealType":"BREAKFAST","unitPrice":5,"status":"ENABLED"}]},{"id":5,"name":"Menu 2","serveDate":"2019-06-10","meals":[{"id":13,"name":"Corn Flakes,"description":"Flakes","image":"","mealType":"BREAKFAST","unitPrice":5,"status":"ENABLED"}]},{"id":4,"name":"Menu 3","serveDate":"2019-07-10","meals":[]}]

Html

<div *ngFor="let item of menuList">
    <h2>Menu</h2>
    {{item.name}} - {{item.servate}}
    <h2 *ngFor="let item of menuList.meals">Meals</h2>
    {{item.name}} - {{item.mealType}}
  </div>

Js

getMenus() {
  this.menuServices.menuList(this.pagedData)
  .subscribe(
    response => {
      if (response && response.code === HttpStatus.OK) {
        this.menuList = response.data;
      }
    },

  );
}

¿Alguna ayuda sobre cómo hacer que esto funcione correctamente como debería funcionar?

1
user6579134 10 may. 2019 a las 15:21

3 respuestas

La mejor respuesta

No es necesario acceder a la lista principal ya que tiene su matriz de comidas en el objeto objeto.

Cambiar código HTML a:

<div *ngFor="let item of menuList">
    <h2>Menu</h2>
    {{item.name}} - {{item.servate}}
  <h2>Meals</h2>
    <div *ngFor="let item of item.meals">
        {{item.name}} - {{item.mealType}}
    </div>
</div>
1
Prashant Pimpale 10 may. 2019 a las 12:59

Cuando estás haciendo algo como let item of menuList eso significa que la variable item debe usarse para referirse a un elemento individual dentro de tu ciclo. Para evitar confusiones, también recomendaría nombrar estos item vars para bucles anidados de manera diferente. Otra cosa importante a tener en cuenta es que todo el marcado que desea generar para cada elemento de la matriz debe estar envuelto con un elemento con *ngFor. No es el caso con su etiqueta <h2> que se imprime para cada comida, pero no la descripción de la comida.

Edite la plantilla de la siguiente manera:

<div *ngFor="let menuItem of menuList">
   <h1>Menu</h1>
   <h2>{{menuItem.name}} - {{menuItem.serveDate}}</h2> 
   <p>maybe description here</p>
   <h3>Meals</h2>
   <p *ngFor="let mealItem of menuItem.meals">{{mealItem.name}} - {{mealItem.mealType}}</p>
</div>
1
Alexander Gasnikov 10 may. 2019 a las 12:39
<div *ngFor="let menu of menuList">
    <h2>Menu</h2>
    {{menu.name}} - {{menu.servate}}
  <h2>Meals</h2>
    <ng-container *ngFor="let meal of menu.meals">
        {{meal.name}} - {{meal.mealType}}
    </ng-container>
</div>

De esta manera, no tiene que agregar divs innecesarios ni ninguna otra etiqueta html para realizar un bucle en angular.

Esta es la manera perfecta de hacer bucles anidados sin cambiar su html

4
Aarsh 10 may. 2019 a las 12:32