Reputation: 945
I am using the p-dropdown primeNg component and it can take an Observable | async value in a template like this: [options]="to.options | async"
but it's not working when i build my app with aot compilation(it works without problem if I remove aot).
I have the following errors :
ERROR in src/app/ui-forms/types/select.type.ts.SelectFieldType.html(6,11): No overload matches this call. The last overload gave the following error. Argument of type 'any[] | Observable<any[]>' is not assignable to parameter of type 'Promise'. Type 'any[]' is missing the following properties from type 'Promise': then, catch, [Symbol.toStringTag], finally src/app/ui-forms/types/select.type.ts.SelectFieldType.html(18,13): No overload matches this call. The last overload gave the following error. Argument of type 'any[] | Observable<any[]>' is not assignable to parameter of type 'Promise'. Type 'any[]' is not assignable to type 'Promise'.
select.type.ts
import {
NgModule,
Component,
ChangeDetectionStrategy,
OnInit,
OnDestroy,
} from '@angular/core';
import { FieldType } from '@ngx-formly/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { DropdownModule } from 'primeng/dropdown';
import { SelectField, SelectItem } from '../fields/select.field';
import { isObservable, Observable, of, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MultiSelectModule } from 'primeng/multiselect';
@Component({
selector: 'in-select-field',
template: `
<div class="p-field p-input-filled">
<span class="p-float-label">
<p-dropdown
*ngIf="!to.multiple; else multiple"
[options]="to.options | async"
[formControl]="formControl"
[autoDisplayFirst]="to.autoDisplayFirst"
[filter]="to.filter"
[required]="to.required"
[formlyAttributes]="field"
[showClear]="to.clearable"
[emptyFilterMessage]="to.emptyFilterMessage"
(onChange)="to.change && to.change(field)"
></p-dropdown>
<ng-template #multiple>
<p-multiSelect
[options]="to.options | async"
[formControl]="formControl"
[required]="to.required"
[formlyAttributes]="field"
selectedItemsLabel="{0} éléments sélectionnés"
></p-multiSelect>
</ng-template>
<label [for]="field.key"
>{{ to.label }}<span *ngIf="to.required" class="required-field"></span
></label>
</span>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SelectFieldType extends FieldType implements OnInit, OnDestroy {
private destroy$;
ngOnInit(): void {
let field: SelectField = this.to.field;
if (field.isMultipleSelection()) {
this.formControl.setValue([]);
} else if (!!field && field.isDisplayIfExistsOnlyOne()) {
this.destroy$ = new Subject();
const items$ = <Observable<SelectItem<any>[]>>(
(isObservable(field.getItems())
? field.getItems()
: of(field.getItems()))
);
items$.pipe(takeUntil(this.destroy$)).subscribe((items) => {
if (!!items && items.length === 1) {
this.formControl.setValue(items[0].value);
}
});
}
}
ngOnDestroy() {
if (!!this.destroy$) {
this.destroy$.next();
this.destroy$.complete();
}
}
}
@NgModule({
declarations: [SelectFieldType],
imports: [
CommonModule,
ReactiveFormsModule,
FormlyModule.forRoot({
types: [
{
name: 'select',
component: SelectFieldType,
wrappers: ['form-field'],
},
],
}),
DropdownModule,
MultiSelectModule,
],
exports: [],
providers: [],
})
export class SelectFieldTypeModule {}
Could someone help me to fix this?
I'm really stuck and I can't glimpse any solution.
Thank you very much
Upvotes: 0
Views: 52