0

Estoy usando Angular en la versión 7 con un componente que tiene una serie de divs que se renderizan de acuerdo a los datos provenientes de un @Input y que se debería actualizar de acuerdo a la respuesta de un servicio, sin embargo el componente no se actualiza correctamente, el loader queda cargando (loading=true) hasta que doy clic en el campo de texto y luego fuera en otro elemento.

Template:

<div class="row" *ngFor="let message of messages">
  <div>{{message.date}}</div>
  <div>{{message.body}}</div>
</div>
<div class="row" *ngIf="thread.isOpen">
  <div class="panel" >
    <form (ngSubmit)="onSubmit()" [formGroup]="messageForm">
      <textarea class="textarea" name="message" id="message" formControlName="message"></textarea>
      <button class="btn"">
      <span *ngIf="!loading; else loadingTemplate">send</span>
      <ng-template #loadingTemplate>
        <i class="fa fa-spin"></i>
      </ng-template>
    </button>
 </form>
</div>

Componente:

@Input() messages;
messageForm: FormGroup;
loading: boolean = false;

ngOnInit(): void {
    this.loadFromControls();
}

loadFromControls(): void {
  this.messageForm = this.formBuilder.group({
    message: this.formBuilder.control('', [])
  });
}

onSubmit() {
  if (!this.messageForm.valid) return;
    this.loading = true;
    const message = this.messageForm.controls['message'].value;
  
    this.service.sendMessage(this.thread._id, message).subscribe(() => {
      if (this.messages) {
        this.messages.push({
            date: new Date(),
            body: 'test message'
        });
      }

      this.messageForm.controls['message'].setValue("");
      this.loading = false;
    }, (err) => this.errorMessage(err));
  }

Servicio

sendMessage(id: string, message: string): Observable<any> {
  return this.http.post(`/api/messages/${id}`, { message })
        .map((res) => res.json())
        .catch((error) => Observable.throw(error.json().code || 'error'));
}

Llevo dos días con este problema y no sé si es algo básico que estoy pasando por alto.

4
  • Lo primero que se me ocurre es que sendMessage (el post a tu api) obtenga un error y por tanto nunca se ejecute el código que hay en la función que le pasas a subscribe. ¿La lista de mensajes se actualiza? Commented el 6 sept. 2022 a las 12:59
  • Sí, la lista se actualiza bien, pero solo cuando doy clic en el componente y luego fuera de él. Lo mismo sucede si por ejemplo en vez de llamar el servicio, utilizo un setTimeout(() => {this.messages.push({ date: new Date(), message }); } Commented el 6 sept. 2022 a las 15:25
  • 1
    Parece relacionado con el sistema de detección de cambios. ¿Estas usando la estrategia de detección de cambios OnPush?
    – akotech
    Commented el 6 sept. 2022 a las 16:19
  • El comentario de @akotech creo que apunta a la posible causa. Aprovecho para recomendar que, cuando se ponga código en una pregunta relacionada con angular, se añada toda la clase para entender el contexto completo: a veces las anotaciones del componente o el código del constructor (los parámetros) están relacionados con el problema expuesto Commented el 7 sept. 2022 a las 8:02

1 respuesta 1

0

El problema lo solucioné usando un BehaviorSubject, pasando de:

loading: boolean = false;
...
this.loading = true;

a:

loading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
...
this.loading$.next(true);

y usando en el template implementando el async:

<span *ngIf="!(loading$ | async); else loadingTemplate">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.