Skip to main content
2 de 2
se eliminaron 76 caracteres en el cuerpo
AndreFontaine
  • 717
  • 1
  • 9
  • 25

Componente de Angular no se actualiza usando @Input y Servicio

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.

AndreFontaine
  • 717
  • 1
  • 9
  • 25