內容只在我點擊時出現在頁面上

我已經通過Angular 2應用程序連接到Firebase 3，沒有什麼可言，只是一個包含一小組數據的簡單表格。內容只在我點擊時出現在頁面上

在我的角度2應用程序，我已經創建了我創建了一個偵聽器事件裏面的服務的服務如下所示：

getAddedBugs(): Observable<any> { 
    return Observable.create(obs => { 
     this.bugsDbRef.on('child_added', bug => { 
      const newBug = bug.val() as Bug;            
      obs.next(newBug); 
     }, 
     err => { 
      obs.throw(err) 
     }); 
    }); 
}

我注入該服務爲我bug.component.ts並調用指定的給定函數以上：

getAddedBugs() { 
    this.bugService.getAddedBugs().subscribe(bug => { 
     this.bugs.push(bug); 
    }, 
     err => { 
      console.error("unable to get added bug - ", err); 
     }); 
}

此填充陣列，其中我然後能夠循環通過HTML內和建表內容如下所示：

<tbody> 
    <tr *ngFor="let bug of bugs"> 
     <td>{{ bug.title }}</td> 
     <td>{{ bug.status }}</td> 
     <td>{{ bug.severity }}</td> 
     <td>{{ bug.description }}</td> 
     <td>{{ bug.createdBy }}</td> 
     <td>{{ bug.createdDate }}</td> 
    </tr> 
</tbody>

我遇到的問題是當我加載頁面時，我在頁面上什麼也看不到，但是當我點擊頁面時，例如表格標題，然後*ngFor內的表格內容出現？不，我沒有任何東西連接頭，所以我沒有調用任何額外的功能。

有人能向我解釋爲什麼我要點擊頁面來查看錶內容出現？

來源

2016-12-29 Code Ratchet

的問題是改變檢測，這是什麼this.bugsDbRef.on？它是否在angular2代碼中？ – Milad

@Milad bugsDbRef是我的firebase數據庫連接：'private bugsDbRef = this.firebase.database.ref（'/ bugs'）;' –

好吧，你的組件changeDetectionStrategy是什麼？ – Milad

我假設你的問題是this.bugsDbRef.on不在Angular2區域內，所以當它獲取它的值並更新模型時，Angular不知道它，當你點擊時，變化檢測啓動並檢測到組件更改並相應地更新視圖。

你可能需要做的這一個：

運行區內的推動：

constructor(private zone:NgZone){} 

this.zone.run(()=>{ 
    this.bugs.push(bug); 
})

或者

運行detectChanges後推

constructor(private cd:ChangeDetectorRef){} 
    this.bugs.push(bug); 
    this.cd.detectChanges();

或者

運行它的setTimeout

setTimeout(()=>{ 
     this.bugs.push(bug); 
    });

內，順便說一下，你可以把它更加明確，通過使用異步管：

<tbody> 
    <tr *ngFor="let bug of bugs | async"> 
     <td>{{ bug.title }}</td> 
     <td>{{ bug.status }}</td> 
     <td>{{ bug.severity }}</td> 
     <td>{{ bug.description }}</td> 
     <td>{{ bug.createdBy }}</td> 
     <td>{{ bug.createdDate }}</td> 
    </tr> 
</tbody>

和服務：

getAddedBugs() { 
    this.bugService.getAddedBugs(); // remove the subscribe 
}

來源

2016-12-29 03:14:25 Milad

內容只在我點擊時出現在頁面上

回答

相關問題