Angular 如何从REST服务读取和显示地图列表？

我需要从REST服务的地图列表中读取和显示。如果我能从地图中存储的对象中读取一个变量，我应该能够完成我的项目

我尝试将地图读入数组，并使用*ngFor循环遍历每个地图，以读取存储在地图中的对象的名称变量

REST服务内容

{"testmap1":

[{"name":"testObject1","boolean1":true,"boolean2":true,"boolean3":false,"otherString":"test"},
{"name":"testObject2","boolean1":false,"boolean2":false,"boolean3":false,"otherString":"test2"}],

"testmap2":

[{"name":"testObject3","boolean1":false,"boolean2":false,"boolean3":false,"otherString":"test3"},
{"name":"testObject4","boolean1":false,"boolean2":true,"boolean3":false,"otherString":"test4"}]}

app.home.ts

数组：任意[]；
恩戈尼尼特（）{
this.http.get（'http://myURLhere/retrieve）。订阅(
数据=>{
this.array=数据为任意[]；
log（this.array）；
},
（错误：HttpErrorResponse）=>{
控制台日志（错误消息）；
}
);
}

app.home.html

{{object.name}

我的代码导致：

Doing this resulted in the error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

---

我希望有一个表显示

mapObject1

和

mapObject2

。表中没有任何内容。

嗨，为了使代码更干净，你应该考虑把大部分逻辑放在一个服务中，但是要解决这个问题。

你可以这样做

retrieveAll() {
  return this.http.get('http://myURLhere/retrieve')
  .pipe(
  tap(() => console.log("HTTP request has been triggered")),
  catchError(err => {
      console.log('Handling error locally and rethrowing it...', err);
      return throwError(err);
    }));
 }

ngOnInit() {
  this.retrieveAll().subscribe(data => this.array = data,
  err => console.log('HTTP Error', err) // This enables you to console log errors from the subscription 
  );
}

---

为了使代码更干净，你应该考虑把大部分逻辑放在一个服务中，但是要解决这个问题。

你可以这样做

retrieveAll() {
  return this.http.get('http://myURLhere/retrieve')
  .pipe(
  tap(() => console.log("HTTP request has been triggered")),
  catchError(err => {
      console.log('Handling error locally and rethrowing it...', err);
      return throwError(err);
    }));
 }

ngOnInit() {
  this.retrieveAll().subscribe(data => this.array = data,
  err => console.log('HTTP Error', err) // This enables you to console log errors from the subscription 
  );
}

---

好的，我们有一个物体的物体。我们可以利用angular提供的管道来迭代对象属性。因此，您的数据分配是正确的，除了

数组

将是一个对象。在这里我初始化它，所以我们不需要模板中的

*ngIf

。我通常初始化所有变量，但这只是一个建议

array={}；
this.http.get（'http://myURLhere/retrieve）。订阅(
数据=>{
this.array=数据；
log（this.array）；
},
（错误：HttpErrorResponse）=>{
控制台日志（错误消息）；
}
);

和模板：

{{o.name}}

演示：

---

我强烈建议您键入数据，而不要使用

任何

。毕竟，我们使用的是类型脚本；）也让你的生活变得轻松多了。正如在其他答案中提到的，您应该将http请求移动到服务，就像我在下面的演示中所做的那样。通常服务处理这类事情，组件只订阅数据。

好的，所以我们有一个对象对象的对象。我们可以利用angular提供的管道来迭代对象属性。因此，您的数据分配是正确的，除了

数组

将是一个对象。在这里我初始化它，所以我们不需要模板中的

*ngIf

。我通常初始化所有变量，但这只是一个建议

array={}；
this.http.get（'http://myURLhere/retrieve）。订阅(
数据=>{
this.array=数据；
log（this.array）；
},
（错误：HttpErrorResponse）=>{
控制台日志（错误消息）；
}
);

和模板：

{{o.name}}

演示：

---

我强烈建议您键入数据，而不要使用

任何

。毕竟，我们使用的是类型脚本；）也让你的生活变得轻松多了。正如在其他答案中提到的，您应该将http请求移动到服务，就像我在下面的演示中所做的那样。通常服务处理这类事情，而组件只订阅数据。

当尝试实现代码时，我得到以下错误：类型为“（res:any）的参数=>any'不可分配给'readonly（readonly[unknown，unknown]）[]类型的参数。类型“（res:any）=>any”缺少类型“readonly（readonly[unknown，unknown]）[]”中的以下属性：concat、join、slice、indexOf和15个以上。我明白了，不过我主要建议在使用API时先创建一个模式。但问题是我映射了对象本身。我刚刚编辑了代码，现在就试试吧谢谢你的帮助；但仍有一些问题：找不到名称“tap”或“res”，并且类型“void”上不存在属性“subscribe”。这很好，tap不是必需的，尽管它只是一个rxjs函数，用于记录或了解何时触发或单击了可观察对象。为了解决这个问题，您应该使用这个import{tap}从'rxjs/operators'导入它；同时，我意识到我在几行代码中犯了一个错误，请检查我是否已经更新了。很抱歉，请立即检查，我将等待您的反馈。在尝试实现代码时，我收到以下错误：类型为“（res:any）的参数=>any'不可分配给'readonly（readonly[unknown，unknown]）[]类型的参数。类型“（res:any）=>any”缺少类型“readonly（readonly[unknown，unknown]）[]”中的以下属性：concat、join、slice、indexOf和15个以上。我明白了，不过我主要建议在使用API时先创建一个模式。但问题是我映射了对象本身。我刚刚编辑了代码，现在就试试吧谢谢你的帮助；但仍有一些问题：找不到名称“tap”或“res”，并且类型“void”上不存在属性“subscribe”。这很好，tap不是必需的，尽管它只是一个rxjs函数，用于记录或了解何时触发或单击了可观察对象。为了解决这个问题，您应该使用这个import{tap}从'rxjs/operators'导入它；同时，我意识到我在几行代码中犯了一个错误，请检查我是否已经更新了。很抱歉，请立即检查，我将等待您的反馈。为了澄清，我将有许多“testMap”形式的映射，因此我需要一次将它们全部读入，以便我可以遍历所有映射。对于您显示的当前代码，我的解决方案应