Как показать индикатор открытия / загрузки Mat-диалога - PullRequest
Новая
       6

Как показать индикатор открытия / загрузки Mat-диалога

0 голосов
/ 04 июля 2019

Я использую диалоговое окно mat для создания диалогового окна с сотнями полей ввода. Так что загрузка займет несколько секунд. Я хочу показать индикатор занятости, когда диалог загружается.

Очень простой код. При нажатии кнопки я устанавливаю логическое значение true и вызываю dialog.open () . Затем установите значение false в dialogRef.afterOpened () событие.

Но логическое значение не устанавливается в true, пока не будет завершено событие dialog.open (). Я не могу понять, почему.

StackBlitz здесь https://stackblitz.com/edit/angular-d6nfhr

Введите значение скажем, 1000; Я ожидаю, что текст «Открытие диалога ...» (рядом с кнопкой «Добавить») появится вскоре после нажатия кнопки «Добавить». Но он мигает секунду после того, как диалог готов.

1 Ответ

1 голос
/ 05 июля 2019

Решение не отвечает на вопрос согласно заданному вопросу, но будет действовать как обходное решение.

Решение

Вместо отображения значка загрузки при загрузкелюбое количество данных, согласно UX, для пользователя лучше показать ограниченное количество полей ввода и добавить кнопку, которая добавит больше поля ввода текста в диалоговом окне.

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>

демонстрация работы над стеком

...