打字稿/ Angular 5-对象迭代

Question

我想通过ngModel从html页面收集信息，并将其插入声明的对象中，然后通过ngFor在HTML页面中对该对象进行迭代。

我已经做到了，但是它正在检索以下错误：

  

找不到类型不同的支持对象“ [object Object]”   '宾语'。 NgFor仅支持绑定到数组等Iterable。

Answer 1

  

使用Object.keys获取键（给定字符串数组）并对其进行迭代。 See this Demo

假设您的对象是obj：

  obj = {
    apple: "A fruit",
    ball: "A thing to play with"
  }

  get keys(): string[] {
    return Object.keys(this.obj);
  }

在您的模板中：

仅适用于密钥：

 <div *ngFor="let key of keys">{{ key }}</div>

给予：

apple
ball

---

仅适用于值：

<div *ngFor="let key of keys">{{ obj[key] }}</div>

给予：

A fruit
A thing to play with

---

对于键和值：

<div *ngFor="let key of keys">{{ key }} : {{ obj[key] }}</div>

给予：

apple : A fruit
ball : A thing to play with