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

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

    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

您在erros订阅中异步实例化this.errosSvc.getErros数组，这就是它只返回部分数据的原因。

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

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


public errox: FirebaseListObservable<any>;

ngOnInit() {

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

ng不显示数组

2 个答案: