Выпадающий выберите стартовый спиннер в Angular 6 - PullRequest
Новая
       48

Выпадающий выберите стартовый спиннер в Angular 6

0 голосов
/ 18 октября 2018

У меня есть следующий код:

https://stackblitz.com/edit/angular-6wtyrh

Я попытался заставить всплывающее окно вращаться, чтобы уведомить пользователя о загрузке данных.У меня не так много удачи.В моем примере я загрузил много данных, чтобы можно было увидеть, сколько времени потребуется для заполнения данных полей.Все, что вам нужно сделать, это щелкнуть по выбору (более вероятно, по нижнему) и увидеть, что для ответа страницы требуется некоторое время.Что можно сделать, чтобы сбросить счетчик.

Счетчик срабатывает и скрывается * ngIf.Я попытался запустить стартер в элементах <mat-select> и даже в элементах <mat-option>. 

<mat-select panelClass='element-selection-width' #elementSelection='ngModel' #selectDropdown [ngModel]='elementSelectionListngModel' placeholder='Select an Existing Element ({{elementSelectionList.length}})' (selectionChange)='startCog()'   (ngModelChange)='onChange($event)'>

или 

<mat-option *ngFor='let element of elementSelectionList' [value]='element.id'  (click)='startCog()'>

Кажется, он не работает до тех пор, пока данные не будут загруженыв поля, и он даже не отключает Cogs после загрузки данных в поля с помощью инструкции: 

this.loading = false; // used to hide cogs

в методе onChange(), который был записан для загрузки данных.

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

Есть мысли?

1 Ответ

0 голосов
/ 18 октября 2018

Ваш код работает, просто this.loading = false устанавливается до того, как пользовательский интерфейс вызовет startCog () .

  • Если вы поместите журнал консоли выше this.loading = false и увидите консоль, когда выберете раскрывающийся список, вы увидите проблему с синхронизацией, о которой я говорю.

Если вы обернетесь this.loading = false в setTimeout на 2 секунды, винтики исчезнут ... обычно вы устанавливаете это ложно в ответе на вызов APIили какой-то другой механизм, в этом случае этот setTimeout не будет необходим и только имитирует задержку API. 

console.log('setting false')
setTimeout(()=>this.loading = false,2000);

Обновление:

После игры вокругс вашим примером stackblitz еще немного, вы определенно испытываете блокировку браузера из-за этого цикла ngFor при выборе из данных 01 в другой ввод данных 

<div *ngFor='let panelLayout of sourceDestinationParametersValuesData'>
  • Когда блокировка, как это происходитЭто похоже на то, что браузер просто блокирует и больше ничего не делает, пока не выполнит итерацию большого подмножества данных для визуализации представления.
  • Именно поэтому ваши винтики запускаются не так, как должны.
  • Вам, вероятно, придется подумать о том, как разделить эти данные на более мелкие подмножества или оценить проект, чтобы определить, может ли он быть полностьюперемещен в другую часть рабочего процесса.
  • Вы ожидаете, что браузер будет делать слишком много, и вам нужно найти способ распределить рабочую нагрузку.

Update2: Вот решение, которое я использую в своих проектах, чтобы обманом заставить DOM выполнять итерации только по этим большим подмножествам данных, когда пользователь щелкает элемент.

  • Это заставляет вращатель работать так, как вы хотитеэто ... однако
  • Теперь это замедляет расширение панели расширения матов, в которой действительно стоит проблема.

Изменение HTML-кода 

<div *ngFor='let panelLayout of sourceDestinationParametersValuesData; let i = index'>
            <mat-expansion-panel #i id='panelLayout.panelId' class='expansionPanel'>
              <mat-expansion-panel-header class='expansionHeader'>
                {{panelLayout.title}}
              </mat-expansion-panel-header>
              <div *ngIf="i.expanded" class='expansion-panel-content'>
...