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.