У меня есть следующий mat-select
элемент управления, параметры которого динамически загружаются с сервера на ngOnInit
:
<mat-form-field class="full-width">
<mat-select placeholder="Category" formControlName="patientCategory">
<mat-option>--</mat-option>
<mat-option *ngFor="let category of patientCategories" [value]="category">
{{category.name}} - {{category.description}}
</mat-option>
</mat-select>
<mat-error *ngIf="form.controls['patientCategory'].hasError('required')">
Please select a category
</mat-error>
</mat-form-field>
Элемент управления является частью группы форм с именем form
, которой я являюсьздание с this.formBuilder.group({})
.Элемент управления находится внутри компонента с функцией, называемой populateStep
.
populateStep(value: PatientStepModel) {
// Set values of other controls..
// Categories have been retrieved
if (this.patientCategories.length > 0) {
// Must set reference for MatSelect
const toSelect = this.patientCategories.find(c => c.id == category.id);
this.form.get('patientCategory').setValue(toSelect);
} else {
this.logger.trace('No categories exist, will set category at the end of HTTP call..');
this.categoryToSelect = value.category;
}
}
. Как показано в приведенном выше коде, когда внешний компонент вызывает функцию populateStep
, функция проверяет, были ли категориизагружается с сервера.Если категории есть, я могу установить значение выбора.
Однако, если категории пусты, т. Е. HTTP-вызов все еще выполняется, я должен установить переменную categoryToSelect
исделать такой же выбор внутри обратного вызова subscribe
.
private loadPatientCategories(): void {
this.operationCategoryService.getAll()
.subscribe(
results => {
this.patientCategories = results;
if (this.categoryToSelect) {
// Must set reference for MatSelect
const toSelect = this.patientCategories.find(c => c.id == category.id);
this.form.get('patientCategory').setValue(toSelect);
}
},
error => {
this.notificationService.openSnackBar('An error occurred');
}
);
}
Я не доволен этим решением, так как оно требует от меня одного и того же в нескольких местах, есть ли лучшее решение?Возможно установить таймаут перед установкой категории?Хотя я не уверен, сколько времени займет HTTP-вызов.