Question

我正在从具有一些子对象的API接收JSON数据。该API有一个菜单级别，而在菜单下层则是用餐。我要做的是在菜单下显示与每个菜单相关的餐点

API的JSON

[{"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;
      }
    },

  );
}

是否有任何有关如何使其正常工作的帮助？

Answer 1

<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>

使用这种方法，您不必添加不必要的div或任何其他html标记即可循环进入角度。

这是进行嵌套循环而无需更改html的完美方法

Answer 2

由于您在item对象中拥有了饭菜数组，因此无需访问主列表。

将HTML代码更改为：

<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>

Answer 3

当您执行类似let item of menuList的操作时，这意味着item变量应用于引用循环中的单个项目。为避免混淆，我还建议对嵌套循环的这些item变量进行不同的命名。要记住的另一件事是，要为每个数组项目输出的所有标记都应使用*ngFor元素包装。并非每餐都印上<h2>标签，但不是餐点描述。

按如下所示编辑模板：

<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>

使用angular6

3 个答案: