嗨，我正在為一個學校專案構建一個帶有 angular 的聊天應用程式，我的后端使用 firebase，我的 ngfor 有問題。
例如，如果我重新加載頁面，除非我將路由器鏈接懸停在導航欄上，否則我什么也看不到。但是有時它會在頁面上一段時間后作業而無需任何操作
當我收到訊息時，我需要在頁面上才能看到它們...
當我第一次重新加載我的頁面時，我的陣列是空的，這可能是重新加載時ngfor 錯誤 陣列的原因。
我正在使用 ngOnInit() 訂閱：
messages: Message[];
messageSubscription: Subscription;
constructor(private messageService: MessageService, private router: Router) {
}
ngOnInit(): void {
this.messageSubscription = this.messageService.messageSubject.subscribe(
(messages: Message[]) => {
console.log(messages)
this.messages = messages;
}
);
this.messageService.getMessage();
this.messageService.emitMessage();
}
ngOnDestroy(): void {
this.messageSubscription.unsubscribe();
}
這是我的 html 模板：
<div *ngFor="let message of messages" class="message-box">
<img [src]="message.photoURL" class="profile-picture">
<div class="content-box">
<div class="information">
<p class="username">{{message.displayName}}</p>
<p class="date">{{message.createdAt | date: 'short'}}</p>
</div>
<p class="text">{{message.text}}</p>
</div>
</div>
在這里，您可以使用我的 getMessage() 函式和 emitMessage() 找到我的服務：
messages:Message[] = [];
messageSubject = new Subject<Message[]>();
constructor() { }
emitMessage(){
this.messageSubject.next(this.messages);
}
saveMessage(newMessage: Message){
firebase.database().ref('/message').push(newMessage);
}
getMessage(){
firebase.database().ref('/message')
.on('value', (data) => {
this.messages = data.val() ? Object.values(data.val()): [];
this.emitMessage();
});
}
這是我的專案的回購：https : //github.com/Zuxaw/AngularChatApp
如果有人有我感興趣的解決方案
uj5u.com熱心網友回復：
問題是，您的 firebase 庫不是特定于 Angular 的。
這意味著您有時需要確保它的代碼，主要是它的事件回呼，在 Angular 區域內運行（谷歌閱讀它）以確保在資料更改時呼叫更改檢測“tick”。
訊息.service.ts
import { Injectable, NgZone } from '@angular/core';
// ...
constructor(private zone: NgZone) { }
// ..
getMessage(){
firebase.database().ref('/message')
.on('value', (data) => {
this.zone.run(() => {
this.messages = data.val() ? Object.values(data.val()): [];
this.emitMessage();
});
});
}
uj5u.com熱心網友回復：
我認為您可能需要使用該child_added事件而不是value在您的getMessage方法中。
檢查您是否在您的getMessage方法中按時接收資料，如果不是，很可能是因為事件。
但是我不明白的一件事是為什么你在emitMessage內部getMessage呼叫并且在你的組件中呼叫它之后getMessage，試圖逃避它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391784.html
標籤：javascript 有角的 rxjs 聊天 ngfor
下一篇：反應不顯示任何東西