【问题标题】:Iterating over an object from the database迭代数据库中的对象
【发布时间】:2019-10-10 21:19:30
【问题描述】:

我正在做 Angular 和 Firebase 的项目。我从 firebase 获得一个对象,我想在 html 中显示它,但我不知道如何从数组中的对象获取值。 如何从 firebase 遍历自动索引?

这是调用 Firebase:

getListTasks() {
  return this.db.list('/Tasks').valueChanges();
}

这是我的组件:

this.taskService.getListTasks().subscribe(t => {
      this.todoTasks = t;
    });

这是我在数组中的对象: https://imgur.com/a/7rZJx8D

【问题讨论】:

  • 嗨 @student_it -- 你能发布你的 Angular 代码和调用 Firebase 的代码吗?
  • 当然可以。

标签: javascript angular firebase-realtime-database angularfire


【解决方案1】:

您必须将对象转换为数组才能像下面那样进行迭代

  this.taskService.getListTasks().subscribe(tasks => {

  const tasksArray = Object.keys(tasks).map((key, index) => {
      const task = tasks[key];
      return task;
    });
    this.todoTasks = tasksArray;
  });

Angular 也有一个使用键值管道执行此操作的内置机制

我强烈推荐this answer

【讨论】:

    【解决方案2】:

    假设 todoTasks 是一个数组,这就是你要实现的方式。

    <div *ngFor="let todo of todoTasks">
      <div *ngFor="let value of todo.myMap.values()">
        {{value.attribute}}
      </div>
    </div>
    

    【讨论】:

    • 我试过了。不起作用,因为数组中是对象,对象中是对象。
    • 找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。
    • 你的意思是你的对象中有一张对象地图?
    • 是的,我在您的对象中有一张对象地图。
    • 我已经编辑了我的答案。看看它。这是我认为您的问题的教程:howtodoinjava.com/typescript/for-of-loop
    猜你喜欢
    • 1970-01-01
    • 2018-08-03
    • 2017-02-09
    • 1970-01-01
    • 2020-01-22
    • 2018-11-04
    • 1970-01-01
    • 2020-11-20
    • 2020-08-12
    相关资源
    最近更新 更多