Question

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

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

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

StackBlitz在这里 https://stackblitz.com/edit/angular-d6nfhr

输入例如1000的值；我希望在单击“添加”按钮后不久会出现“对话框打开...”（靠近“添加”按钮）文本。但对话框准备好后，它会闪烁一秒钟。

Answer 1

该解决方案不会按照预期的问题回答该问题，但可以作为解决方法。

解决方案

根据UX，与其在加载任意数量的数据时不显示加载图标，不如让用户显示有限数量的输入框并添加一个在对话框中添加更多输入文本字段的按钮。 / p>

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();
  }

}

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>

stackblitz working demo

如何显示Mat-dialog打开/加载指示器

1 个答案: