Typescript strict mode cannot assign Observable async to primeNg dropdown component

Published

I am using the p-dropdown primeNg component and from what I can see this should be able to take an Observable | async value and use it properly but the Typescript strict mode will not allow this, giving

error TS2322: Type ‘Customers[] | null is not assignable to type ‘any[]’"

customers.html

<p-dropdown
[options]="customers$ | async"
placeholder="Select a customer:"
optionLabel="name"
[showClear]=true"
formControlName=selectedCustomer"
</p-dropdown>

customers.component.ts

customers$!: Observable<Customer[]>;
ciForm!: FormGroup;

constructor(private: fb: FormBuilder, private customerEntityService: CustomerEntityService){}

ngOnInit() {
    this.ciForm = this.fb.group({
       selectedCustomer: [null],
       selectedReason: [null],
       selectedId: [null],
       comments: ['']
    });

    this.ciCustomers$ = this.customerEntityService.entities$
    .pipe(
       map(customer => customer)
    );
}

customer.model.ts

export class Customer {
    public name: string = '';
    public phoneNumber: string = '';
}

I was under the impression that using the "!" after the variable denoted that it definitely will have a value, which is the case since the data is being fetched in the route resolve prior to loading the component, but this doesn’t seem to matter to the compiler. Any help as to how to fix this? I am at my wits end on this. The primeNg community forums seem to be of no assistance in getting this resolved either.

I know I probably can declare another variable and subscribe to the data in the entityCache and then pass that data to the options but the whole point of the async pipe is that I shouldn’t HAVE to do that.

Does anyone have a suggestion as to what I need to do to fix the null issue?

Source: Angular Questions

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq