ngFor 不显示数组 [英] ngFor not displaying arrays

问题描述

我有一个搜索服务:

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 中显示一个数组:

And it's only displaying one Array in the 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".

I know the others Arrays and the search service is working because i implemented a console.log and the data appears right and the search works. The only problem is that the ngFor only displays data from the last Array wich in this case is "utilatas".

推荐答案

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

you need flatten your array of array into array

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

这篇关于ngFor 不显示数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！