Angular 多个数据和[Object][Object]

我使用mongoDB、express、angular和nodejs

我有两个问题：

1） 当我从http获取数据时 我在组件[Object][Object]中使用subscribe函数

2） 我想我对订阅和取消订阅有问题 因为我在一开始就得到了我需要得到的，但之后当我得到的时候 我得到了很多数据 例如：如果我有两张照片的苹果和香蕉之后，它将是 苹果香蕉苹果香蕉 我只想看一个苹果和一个香蕉

component.component.ts 服务，服务 menu.module.ts

---

双重数据：

我猜复制数据的原因是，您总是将新结果推送到服务中getDine函数的菜单数组中。在添加新键之前（就在for循环之前），应该考虑重置菜单数组

[object][object]

用这条线

this.menu.push({ ...responseData[key]}); 

使用“扩展”操作符将对象添加到菜单数组中。在不知道您的响应数据结构的情况下，我觉得这有点奇怪，但它可能会导致您在将其记录到控制台时看到的结果。因此，如果您想更改this.menu结果中的某些内容，您应该更改上面提到的行

这里，一些结果数据的示例可能会有所帮助。

1）您之所以能够获得这些数据，是因为您试图通过控制台记录一组对象。您可以循环浏览每一个并单独打印，或者执行类似于

console.log（this.menu[0].name）

2） http get调用（如果您使用的是HttpClient）应该已经为您提供了一个对象数组，然后您可以将该数组分配给订阅回调中的

menu:menu[]

变量。像这样

为您服务。

public getMeal() {
  return this.http.get('http://localhost:3000/meals');
}

在您的组件中

this.mlService.getMeal().subscribe(menuItems => this.menu = menuItems);

然后在html中，您可以像这样循环遍历每个菜单项的属性

<ul *ngFor="let item of menu">
 <li> {{ item.name }} </li>
 <li> {{ item.description}} </li>
 ....
</ul>

{{item.name}
{{item.description}
....

Try

console.log（JSON.stringify（this.menu））
this.menu.push({ ...responseData[key]}); 

public getMeal() {
  return this.http.get('http://localhost:3000/meals');
}

this.mlService.getMeal().subscribe(menuItems => this.menu = menuItems);

<ul *ngFor="let item of menu">
 <li> {{ item.name }} </li>
 <li> {{ item.description}} </li>
 ....
</ul>