角“等待”对话框不显示
在加载页面数据时，我正在使用垫子旋转器实现一个对话框。我的工作是角质v14。我使用的是对话框，而不是普通的旋转器，因为我需要在其中传递一些信息。我遇到的问题是，除非我在对话框后面加上一个断点，否则对话框不会显示。我对角的理解是同步的，所以显示对话框的代码应该在加载数据之前完成，是吗？但是，我也尝试将一个setTimeout添加到我的LoadData方法中，以便给它额外的时间。但是这个对话框永远不会出现。
对话框是它自己的组件。
<h3 mat-dialog-title>Please Wait</h3>
<mat-dialog-content>
<div style="display:flex; flex-direction:row; justify-content:space-around ">
We're getting your data...
<mat-spinner [diameter]="20"></mat-spinner>
</div>
</mat-dialog-content>
<mat-dialog-actions></mat-dialog-actions>类型记录文件为空。
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit {
constructor(
public spinnerRef: MatDialogRef<SpinnerComponent>
) { }
ngOnInit(): void {
}
}我正在将旋转器和数据加载到组件ngOnInit中：
ngOnInit(): void {
this.showSpinner();
setTimeout(() => this.loadData(), 3000);
this.hideSpinner();
}下面是showSpinner和hideSpinner函数：
private showSpinner(): void {
const spinnerConfig = new MatDialogConfig();
spinnerConfig.disableClose = true;
spinnerConfig.autoFocus = true;
spinnerConfig.width = '400px';
spinnerConfig.height = '150px';
spinnerConfig.closeOnNavigation = false;
spinnerConfig.disableClose = true;
spinnerConfig.hasBackdrop = true;
this.spinner.open(SpinnerComponent, spinnerConfig)
}
private hideSpinner(): void {
this.spinner.closeAll()
}load data方法进行几次服务调用，以获取下拉字段的数据。这是一个例子，总共有4个函数调用。
private loadData(): void {
this.projectService.getAllProjects().subscribe((data) => {
this.projects = data;
}, (error) => {
console.log("an error occured in the project service");
})
回答 1
Stack Overflow用户
发布于 2022-09-06 02:05:14
问题是，您没有等待加载数据的异步过程。这意味着这段代码是同步执行的，但是setTimeout方法内部的回调是异步执行的：
ngOnInit(): void {
this.showSpinner();
setTimeout(() => this.loadData(), 3000);
this.hideSpinner();
}因此，加载旋转器将打开，但会立即再次关闭。
您可以通过等待loadData方法的结果来修复它。使用此代码，将暂停执行，直到loadData方法返回结果：
async ngOnInit() {
this.showSpinner();
await this.loadData();
this.hideSpinner();
}但是要实现这一点，您必须确保可以等待loadData方法。这样做是可以的：
private async loadData() {
const data = await lastValueFrom(this.projectService.getAllProjects());
this.projects = data;
}现在，我们正在等待projectService与RxJS操作符lastValueFrom的响应。这意味着它一直等到从HTTP请求中获得最后一个值(在我们的例子中是项目列表)。通过使用async关键字，loadData方法将自动返回我们的ngOnInit方法可以期待的承诺。
StackBlitz示例
https://stackblitz.com/edit/angular-59cr8m?file=src/app/dialog-overview-example.ts
https://stackoverflow.com/questions/73611430
复制
腾讯云开发者
