Angular material 如何显示Mat对话框打开/加载指示器

我正在使用mat对话框创建一个包含100个输入框的对话框。因此，加载需要几秒钟的时间。我想在加载对话框时显示忙碌指示器

非常简单的代码。单击按钮时，我将布尔值设置为true并调用dialog.open（）。然后在dialogRef.afterOpened（）事件中将其设置为false

但是在dialog.open（）事件完成之前，布尔值不会设置为true。我不明白为什么

这里是闪电战

输入值，例如1000；

---

我希望在单击“添加”按钮后不久会出现“对话框打开…”（靠近“添加”按钮）文本。但在对话框准备就绪后，它会闪烁一秒钟。

该解决方案不会按照预期的问题回答问题，而是作为解决方案

解决方案

根据用户体验，在加载任意数量的数据时，用户最好显示有限数量的输入框，并添加一个按钮，在对话框中添加更多的输入文本字段，而不是显示加载图标

dialog.component.ts

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
  animals: any[] = [];
  getTotalCountVal = null;
  start: number = 0;
  end: number = 20;
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit() {
    this.getTotalCountVal = this.data.totalCount;

    if (this.getTotalCountVal) {
      for (let i = 0; i < this.data.totalCount; i++) {
        this.animals.push('');
      }

    }
  }

  loadMore() {
    if(this.end < this.getTotalCountVal) {
      this.end += 20;
    }
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

@组件({
选择器：“对话框概述示例对话框”，
templateUrl:'dialog overview example dialog.html'，
})
导出类对话框概述示例对话框实现OnInit{
动物：任何[]=[]；
getTotalCountVal=null；
开始：数字=0；
结束：数字=20；
建造师(
公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：DialogData{}
恩戈尼尼特（）{
this.getTotalCountVal=this.data.totalCount；
if（this.getTotalCountVal）{
for（设i=0；i

dialog.component.html

<h1 mat-dialog-title>Total - {{data.totalCount}}</h1>
<div mat-dialog-content>
    <p>Add favorite animals</p>
    <ng-container *ngFor="let animal of animals | slice: start: end; let index=index">
        <mat-form-field>
            <input matInput [(ngModel)]="animal" name ="animal">
      </mat-form-field>
      </ng-container>
    <button *ngIf="end < animals.length" mat-raised-button color="primary" (click)="loadMore()">Add more animals</button>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="animals" cdkFocusInitial>Ok</button>
</div>

Total-{{data.totalCount}
添加喜爱的动物

添加更多的动物
不，谢谢
好啊

---

嘿，你能试试这样的方法吗，先显示

mat对话框

，然后在

mat对话框

中显示加载图标，直到填充数据/Ui。我会这样做。但在数据完全填充之前，对话框和覆盖中的文本似乎都不会出现。