如何强制从 Observable 返回的对象类型到 Angular 中的对象数组？答案

【问题标题】：How to force Object type returned from an Observable to an array of objects in Angular?如何强制从 Observable 返回的对象类型到 Angular 中的对象数组？
【发布时间】：2018-11-12 16:18:11
【问题描述】：

我正在像这样使用 GET 获得响应。

constructor(private http: HttpClient) { }

items: Item[];
stuff: any[];

ngOnInit() {
  const url = ...;
  this.http.get(url)
    .subscribe(next => {
      console.log(next);
      console.log(next.length);
      this.items = next;
      this.stuff = next;
    });
}

我可以看到有 6 个元素以及它们是什么（检查控制台）。但是，这两个字段似乎都不是数组。我正在尝试使用 ngFor 指令迭代出元素，但什么也没看到或只看到一行。

<div ngFor="let item of items">
  ->{{item?.id}}
</div>

<div ngFor="let item of stuff">
  ->{{item?.id}} 
</div>

我知道我可以通过like this 服务公开数据来解决它，但部分原因是，我想在这里快速学习一下如何操作；在某种程度上，我将在服务代码中遇到同样的问题。

我尝试在 next 值上使用 map 和 forEach 但我收到错误消息说 Object 不是一个数组。 IDE 建议将工作数组添加到语法中，使其变为 next.array.forEach 但这甚至没有被执行，产生了大量的红色墨水。

我该怎么办？（不知道在这个阶段用谷歌搜索什么。）

【问题讨论】：

你能提供next对象的结构吗？

标签： arrays angular typescript observable

【解决方案1】：

donkeyObservArray: Observable<Donkey[]>;
donkeyArray: Array<Donkey>;

this.donkeyObservArray.subscribe(donk=> {
this.donkeyArray = donk;

console.log(this.donkeyArray);

要快乐...

或者输入：

donkey: Donkey= null;

getDonkey(): Donkey{
    this.donkey = new Donkey();

this._http.get<Donkey>(...your ws link)
      .subscribe(data => {
        this.donkey = data;

【讨论】：

是的，我正在寻找的是 this。我习惯了 C# 中的打字语法，但在 JS 中，它仍然感觉……太花哨了。谢谢。另外 - 我还有另一个错误，即 ngFor 中缺少星号。幸运的是，我终于看到了。

【解决方案2】：

您可以在传递给模板之前将对象转换为数组 object-2-array-angular-4

或使用自定义管道将对象转换为数组

【讨论】：