Angular 4：如何获取并展示多条数据？实现时遇数据获取问题

我帮你排查了代码里的两个核心问题，咱们一步步来修复：

1. TypeScript 数据定义语法错误 #

你的menuList数组没有正确闭合，第二个对象的定义不完整，这会导致组件无法正确初始化数据。修正后的代码如下：

export class FoodItemsComponent implements OnInit {
  menuList;

  constructor() {
    this.menuList = [
      {txt:'Briyani', item:"chicken briyani"},
      {txt:'Indian Curries', item:"Butter Chicken"}, // 补全完整的对象定义
      {txt:'Snacks', item:"Samosa"} // 可按需添加更多菜单项
    ];
  }

  ngOnInit(): void {
    // 后续若需从API获取数据，可在此发起请求并将返回值赋值给menuList
  }
}

2. HTML 循环结构不合理 #

你原来的代码分别对<h5>和<div>做循环，会导致所有标题先批量显示，再批量显示菜品，结构混乱。应该把每个菜单的标题和菜品放在同一个容器里，统一循环渲染：

<div class='col-md-6'>
  <div class='side-panel' style="margin-bottom: 20px;">
    <div class='headTxt' *ngFor="let menuItem of menuList">
      <h5>{{menuItem.txt}}</h5>
      <div>{{menuItem.item}}</div>
    </div>
  </div>
</div>

额外说明 #

• 修正TypeScript的数组结构后，组件就能正确加载预设的菜单数据；
• 调整HTML的循环层级后，每个菜单标题会和对应的菜品内容一一对应展示，布局更清晰；
• 如果后续需要从后端API获取数据，只需在ngOnInit中发起HTTP请求，将返回的数据赋值给menuList即可（记得在模块中导入HttpClientModule并在组件中注入HttpClient）。

内容的提问来源于stack exchange，提问作者Atchaya