ngFor nicht angezeigt Arrays

Question

Ich habe einen Suchdienst:

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; 

    } 

Und das ist, wo es heißt:

ngOnInit() { 

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

Und es ist nur ein Array in der ngFor Anzeige:

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

Ich kenne die anderen Arrays und der Suchdienst funktioniert, weil ich eine console.log implementiert habe und die Daten richtig angezeigt werden und die Suche funktioniert. Das einzige Problem ist, dass das ngFor nur Daten vom letzten Array anzeigt, das in diesem Fall "utilatas" ist.

Answer 1

Sie Ihr Array von Array in Array glätten müssen

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

Answer 2

instanziiert erros Array asynchron innerhalb des this.errosSvc.getErros Abonnement, deshalb ist es nur Teildaten zurückgibt.

Stattdessen versuchen Iterieren durch das Abonnement Ergebnis selbst, wie folgt aus:

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


public errox: FirebaseListObservable<any>; 

ngOnInit() { 

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