Триггеры событий Angular 7 и Mat-Select
Я пытаюсь получить набор вращающихся шестеренок, поскольку пользователь будет ждать, пока его данные появятся в полях формы. В настоящее время система настроена так, чтобы собирать все данные за один раз, а затем фильтровать данные после выбора пользователя.
<div id='element-selection'>
<mat-form-field appearance='outline'>
<mat-select id='elementSelectionDropdown' panelClass='element-selection-width' #elementSelection='ngModel' #selectDropdown [ngModel]='elementSelection' placeholder='Select an Existing Element ({{elements?.length}})' (ngModelChange)='onElementSelected($event)'>
<mat-option *ngFor='let element of elements' [value]='element.id'>
{{element.title}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
это обрабатывается этим вызовом функции:
onElementSelected(selectionId: string): void {
this.isLoading = true; // start cogs spinning
this.elementPanels.closeAll();
this.isDisabled = false;
this.currentElement = this.reformatElementObject(this.elements
.find(element => element.id === selectionId));
this.isLoading = false; // stop cogs spinning
this.selectDropdown.value = []; // reset dropdown to selection request
setTimeout(()=>this.isLoading = false, 1000);
}
Полный прогон можно найти здесь:
https://angular-y5dnwi.stackblitz.io/
и код здесь:
https://stackblitz.com/edit/angular-y5dnwi
Вызов данных был настроен так, чтобы вызывать базу данных для каждого выбора, и винтики запускались для вращения при выборе, а затем, когда был выполнен вызов DB, они прекращали вращаться. Теперь шестерни вращаются только во время загрузки страницы, как и следовало ожидать, учитывая, что вызов происходит только в начале.
Мне любопытно, есть ли способ вызвать выбор циновки для запуска шестеренок, пока он фильтрует данные и заполняет другие поля формы. Если вы заметили, страница выглядит так, как будто она немного заблокирована, пока страница фильтрует данные. Можно ли заставить механизмы вращаться после того, как выбор сделан и форма заполняется?