Question

我有一个存储在firebase数据库中的对象列表：

我使用angular http get请求获取此列表。获得它之后，我想使用ngFor="let subject of subjects"在html模板中迭代li，这给出了错误：

错误错误：无法找到不同的支持对象＆＃39; [object Object]＆＃39; 类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如阵列。

当我在网上搜索时，我发现ngFor只能在我获取嵌套对象时才能在数组上使用。任何人都可以建议我应该怎么做迭代这些对象。

到目前为止，我已尝试Array.of将整个列表转换为someArray[0]。我还尝试手动将对象的唯一ID更改为数组索引[0, 1, 2]，但是当我使用http post添加新主题时，firebase会自动为新主题分配唯一ID，使其无法使用。

简单来说，告诉我将嵌套对象转换为arrayList，或者如何更改firebase默认的角度分配唯一id的行为（我发现像firebase push函数一样，我无法理解）。

更新

（来自ExaminerService的代码）

getBatchSubjects(batch){
        return this.http.get(firebaseLinkGoesHere);
    }

（来自组件的代码）

onBatchSelected(event){
    this.selectedBatch = event.target.value; //getting value of a html select
      this.examinerService.getBatchSubjects(this.selectedBatch)
      .subscribe(
        (response : Response) => {
          this.selectedBatchData = response.json();
        }
      ),(error) => {
        console.log(error);
      }
  }

（来自HTML模板的代码）

<div class="batchDetails">
  <table class="table table-striped">
    <thead>
      <tr>
        <th class="text-center">S.No</th>
        <th>Subject Name</th>
        <th>Facilitator</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let subject of selectedBatchData.subjects; let i = index">
        <td class="text-center"> {{i + 1}} </td>
        <td> {{subject.name}} </td>
        <td> {{subject.facilitator}} </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您可以使用Object.values将属性转换为数组。这可以通过多种方式完成。

方法1 - 将map operator应用于可观察数据（请参阅this stackblitz）：

import { Observable } from "rxjs/Rx";

public subjects: Array<any>;

this.examinerService.getBatchSubjects(this.selectedBatch)
  .map(x => (Object as any).values(x.json().subjects))
  .subscribe(
    (values) => { this.subjects = values; },
    (error) => { console.log(error); }
  );

方法2 - 使用属性getter或组件类的方法（请参阅this stackblitz）：

get subjects(): Array<any> {
  return (Object as any).values(this.selectedBatchData.subjects);
}

方法3 - 通过转换订阅回调中的值（请参阅this stackblitz）：

public subjects: Array<any>;
...

this.selectedBatchData = response.json();
this.subjects = (Object as any).values(this.selectedBatchData.subjects);

<强>模板

在模板中，ngFor指令将迭代subjects数组：

<tr *ngFor="let subject of subjects; let i = index">
  <td class="text-center"> {{i + 1}} </td>
  <td> {{subject.name}} </td>
  <td> {{subject.facilitator}} </td>
</tr>

Answer 2

尝试以下代码段。

ngFor="let subject of subjects|async

<强>更新

在ExaminerService中，您应导入FirebaseListObservable以定义返回类型FirebaseListObservable<any[]>

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

export class ExaminerService{
     constructor(private db: AngularFireDatabase) {}

    getBatchSubjects(batch){
        return this.db.list('/subjects');
    }

}

在你的组件中应该看起来像这样

export class ExaminerComponent implements OnInit {
  movies: any[];

  constructor(private examinerDb: ExaminerService) { }

  ngOnInit() {
    this.examinerDb.get().subscribe((snaps) => {
       this.selectedBatchData = snaps;
   });
 }
}

使用ngFor对从Firebase

2 个答案: