ulquiorra
ulquiorra

Reputation: 945

Angular AOT throws error when Observable asyncPipe is assigned to primeNg dropdown component

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

Answers (0)

Related Questions