ngFor不顯示陣列

我有一個搜索服務：ngFor不顯示陣列

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

來源

2017-07-12 Diogo Alexandre

您可以發佈結果爲貴「的console.log（誤差修改）;」在組件中添加新的控制檯日誌ngOnInit（）const errox = this.errosSvc.getErros（this.startAt，this.endAt） .subscribe（erros => {console.log（「erros」，erros）; this.erros = erros }） – CharanRoot

http://prntscr.com/fuy0ui，你可以看到有一個對象，因爲我搜索它。問題是，ngFor不承認數組 –

@Jonnysai如果我只使用.map這顯示像這樣http://prntscr.com/fuy5ff –

你需要扁平化您的數組的數組到數組

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

來源

2017-07-12 22:19:15 CharanRoot

謝謝你的兄弟！你有Skype嗎？ –

爲什麼？你可以給我電子郵件ID。 – CharanRoot

對於其他問題，請給我你的電子郵件！ –

您在this.errosSvc.getErros訂閱中異步實例化erros數組，這就是爲什麼它只返回部分數據。

相反，嘗試通過訂閱結果迭代本身，就像這樣：

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


public errox: FirebaseListObservable<any>; 

ngOnInit() { 

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

來源

2017-07-12 21:29:44 shevaroller

ngFor不顯示陣列

回答

相關問題