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

问题描述

我有一个搜索服务：
$ b $ pre $ 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
}
} ）


$ b const errox = this.hey.flatMap（
（（[geral，utilsst，utilfac，utilatas]：[string，string，string， string]）=> {
让erros = [geral，utilsst，utilfac，utilatas];
console.log（erros）;
返回错误;
}））


return errox;

$ b $ / code>

这就是所谓的：

  ngOnInit（）{
 
 const errox = this.errosSvc.getErros（this.startAt，this.endAt）
 .subscribe（erros => this.erros = erros）
} 
  

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

 < tbody> 
< tr * ngFor =犯错误的erros> 
   class =panel panel-defaulttype = buttonclass =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。

解决方案

您需要将数组数组平铺到数组中

<$ p $ {code> const errox = this.errosSvc.getErros（this.startAt，this.endAt）.subscribe（erros => {
let flatten = [] .concat.apply（[ erros）;
console.log（'flatten'，flatten）;
this.erros = flatten}）


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

解决方案

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