Hola, estoy creando una aplicación de chat con angular para un proyecto escolar. Estoy usando firebase para mi backend y tengo un problema con mi ngfor.
Por ejemplo, si vuelvo a cargar la página, no veré nada a menos que coloque el enlace de mi enrutador en mi barra de navegación. Sin embargo, en algún momento funcionará después de un tiempo en la página sin ninguna acción.
Cuando recibo un mensaje necesito estar en la página para verlos...
Cuando recargo mi página por primera vez, mi matriz está vacía, esto puede ser lo que hace que la matriz de errores ngfor se recargue .
Estoy usando ngOnInit() para suscribirme:
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(); }Esta es mi plantilla 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>Aquí puede encontrar mi servicio con mi función getMessage() y 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(); }); }Y este es el repositorio de mi proyecto: https://github.com/Zuxaw/AngularChatApp
si alguien tiene una solucion me interesa
El problema es que su biblioteca de Firebase no es específica de Angular.
Esto significa que algunas veces debe asegurarse de que su código, principalmente sus devoluciones de llamada de eventos, se ejecute dentro de una zona Angular (google para leer sobre esto) para asegurarse de que se invoque una 'marca' de detección de cambios cuando cambien los datos.
mensaje.servicio.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(); }); }); }Creo que es posible que deba usar el evento child_added en lugar del value en su método getMessage .
Verifique si está recibiendo datos a tiempo en su método getMessage , si no, lo más probable es que se deba al evento.
Pero una cosa que no entiendo es por qué está llamando emitMessage dentro getMessage y también llamándolo dentro de su componente después de getMessage , intente evadir eso.