eckiges Material wie man Spinner während einer synchronen intensiven Aufgabe zeigt - eckig

Ich möchte während der Ausführung einer synchronen Aufgabe einen Spinner anzeigen. ich setze showSpinner = true bevor die Aufgabe beginnt und showSpinner=false nachdem es fertig ist. Der Spinner wird jedoch nicht angezeigt. Ich denke, das liegt daran, dass die teure Aufgabe das DOM-Update blockiert *nfIf="showSpinner was den Spinner zeigt. Wie behebe ich das? Ich denke daran, Lebenszyklus-Haken zu verwenden, aber nicht sicher, wie.

updateImageData() {
if (this.cropSizeChanged) {
this.showSpinner = true;
var imgData = this.cropper.getCroppedCanvas().toDataURL(); //**expensive**
this.editedImage = imgData;
this.cropSizeChanged = false;
this.showSpinner = false;
}
console.log("updated imageData");
if(this.isTaggableImage) {
setTimeout(() => {this.croppedImageBoundingRect = this.croppedImageRef.nativeElement.getBoundingClientRect();}, 100);
}
}

Antworten:

Der Grund, warum Ihr Spinner nicht angezeigt wird, ist, dass Sie ihn sofort nach einem teuren Anruf auf false setzen. Jetzt können Sie zwei folgende Dinge versuchen

1. Wenn Sie einen teuren Anruf zurückgeben, wird der Rückruf oder das Versprechen, das es dann geben sollte, im Rückruf auf false gesetzt. Normalerweise verwenden wir in Nageln beobachtbar, also also den Ort, um das zu setzen this.showSpinner = false werde innerhalb von subscribe sein.

2. Versuchen Sie den folgenden Code

   public updateImageData(){ this.showSpinner = true; urthing.expensiveCall() setTimeout()=>{ this.showSpinner = false; },3000); }

Wickeln Sie den teuren Anruf in ein Versprechen wie ein so:

expensiveTask(): Promise<any> {
return new Promise((resolve, reject) => {
let imgData = this.cropper.getCroppedCanvas().toDataURL();
resolve(imgData);
})
}

Und dann setze den Rest der Logik, sobald das Versprechen gelöst wurde:

updateImageData() {
if (this.cropSizeChanged) {
this.showSpinner = true;
this.expensiveTask().then(imgData => {
this.editedImage = imgData;
this.cropSizeChanged = false;
this.showSpinner = false;
});
}
// ...
}