ngFor not displaying arrays

问题

I have a search service :

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;

  }

And this is where it's called :

ngOnInit() {

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

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>

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".

回答1:

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})

回答2:

You instantiate erros array asynchronously inside the this.errosSvc.getErros subscription, that is why it only returns partial data.

Instead, try iterating through the subscription result itself, like this:

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


public errox: FirebaseListObservable<any>;

ngOnInit() {

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

来源：https://stackoverflow.com/questions/45066677/ngfor-not-displaying-arrays