ng不显示数组

Question

我有一个搜索服务：

getErros(start, end): FirebaseListObservable<any>{

this.hey = Rx.Observable.combineLatest(
  this.db.list('/erros/geral',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
  this.db.list('/erros/utilsst',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
  this.db.list('/erros/utilfac',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
      this.db.list('/erros/utilatas',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      })

)

const errox = this.hey.flatMap(
    (([geral, utilsst, utilfac, utilatas]: [string, string, string, string]) => {
        let erros = [geral, utilsst,utilfac,utilatas];
        console.log(erros);
        return erros;
    } ))


return errox;

  }

这就是它的名字：

ngOnInit() {

    const errox = this.errosSvc.getErros(this.startAt, this.endAt)
            .subscribe(erros => this.erros = erros)
  }

而且它只在 ngFor 中显示一个数组：

<tbody>
    <tr *ngFor="let erro of erros">
      <th id="butaoxx" class="col-md-1" style="text-align:center;" scope="row">
        <button id="butaox"  data-toggle="modal" attr.data-target="#{{erro.$key}}"
            class="panel panel-default" type="button" class="btn btn-primary btn-xs ">
            Abrir
        </button>
      </th>
      <td style="text-align:center;">{{erro?.titulo}}</td>
      <td style="text-align:center;">{{erro?.tema}}</td>
      <td  style="text-align:center;">{{erro?.subtema}}</td>
    </tr>
  </tbody>

我知道其他阵列和搜索服务正在运行，因为我实施了 console.log 并且数据显示正确并且搜索有效。唯一的问题是 ngFor 只显示最后一个数组的数据，在这种情况下是 "utilatas"。

Answer 1

您在 this.errosSvc.getErros 订阅中异步实例化 erros 数组，这就是为什么它只有 returns 部分数据。

相反，尝试遍历订阅结果本身，如下所示：

<tr *ngFor="let erro of errox | async">
  ...
</tr>


public errox: FirebaseListObservable<any>;

ngOnInit() {

  this.errox = this.errosSvc.getErros(this.startAt, this.endAt);
}

Answer 2

您需要将数组的数组展平为数组

    const errox = this.errosSvc.getErros(this.startAt, this.endAt) .subscribe(erros => {
 let flatten= [].concat.apply([], erros); 
console.log('flatten',flatten);
 this.erros = flatten})

ng不显示数组

ngFor not displaying arrays

rxjs

firebase

angularfire2

angular