使用ngFor打印对象

Question

我从数据库中提取对象：

对象内容可能不同，所以我们不知道db会发生什么。（我的意思是它也可能是柠檬）

我正在尝试使用ngfor打印它。如果我将此对象转换为数组，我可以打印它：

    Route.belongsTo(models.Subarea, {
      foreignKey: 'subareaId',
      as: 'subarea',
    });

    Route.belongsToMany(models.Book, {
      through: models.BookRoute,
      foreignKey: 'routeId',
      as: 'books',
    });

这将打印 3和5没有苹果和pixi。

我想要做的就是用他们的名字打印出来。（我的意思是苹果：3，pixi：5）

我可以做到这一点，无需将对象转换为数组，只需编写

this.drops = Object.values(monster[this.randommnumber].drops);

<li *ngFor="let drop of drops">
   {{ drop }}
 </li>

但如果数据有柠檬而不是苹果，我该怎么做？

感谢

Answer 1

您需要使用Object.keys()

编写方法以返回属性名称，因为您无法直接在html模板中使用Object.keys

public getKeys(obj: string[]): any {
      return Object.keys(obj);
}

然后，用它来迭代你的对象，

<ul *ngFor="let key of getKeys(obj)">
  <li> {{key}}: {{obj[key]}} </li>
</ul>

Demo

或者，您也可以执行以下操作，这是一种黑客攻击（不推荐）

_obj: any = Object;
myObj = {
    apples: 2,
    oranges: 3
}

在你的HTML中，

<li *ngFor="let key of _obj.keys(y)">
  {{ key }} : {{ myObj[key] }}
</li>

Demo

Answer 2

它很简单，只需将其映射为键值对

Component({
  selector: "app-root",
  template: `
  <li *ngFor="let drop of drops">
  {{ drop.key }} : {{drop.value}}
</li>
  `,
  styles: []
})
export class AppComponent {
  drops: any;
  _drops = {
    apples: 5,
    pixies: 6,
    lemons: 7
  };

  constructor() {
    this.drops = Object.keys(this._drops).map(x => { return { key: x, value : this._drops[x] } });

  }
}

也试图找到更优雅的解决方案。我很确定你可以在不使用额外字段的情况下制作它。