Строгий режим Typescript не может назначить Observable async для раскрывающегося компонента primeNg

Я использую компонент p-dropdown primeNg, и из того, что я вижу, он должен иметь возможность принимать Observable | async и используйте его правильно, но строгий режим Typescript не позволит этого, давая

ошибка TS2322: введите "Клиенты [] | null нельзя присвоить типу '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 = '';
}

У меня создалось впечатление, что при использовании! после переменной обозначено, что она определенно будет иметь значение, что имеет место, поскольку данные извлекаются в разрешении маршрута до загрузки компонента, но это, похоже, не имеет значения для компилятора. Любая помощь относительно того, как это исправить? Я в своем уме на этом. Форумы сообщества primeNg, похоже, тоже не помогают решить эту проблему.

Я знаю, что, вероятно, могу объявить другую переменную и подписаться на данные в entityCache, а затем передать эти данные в параметры, но весь смысл асинхронного канала в том, что я НЕ ДОЛЖЕН этого делать.

Есть ли у кого-нибудь предложения относительно того, что мне нужно сделать, чтобы исправить нулевую проблему?


person MattE    schedule 09.02.2021    source источник
comment
Где вы ставите / набиваете клиентов $ ..?   -  person MikeOne    schedule 09.02.2021
comment
@MikeOne в разрешении для маршрута, но это не имеет отношения к тому, почему он не будет построен.   -  person MattE    schedule 09.02.2021


Ответы (1)


Асинхронный конвейер возвращает тип данных или значение NULL. Что вам нужно сделать, так это использовать *ngIf="customers$ | async as customers" [options]="customers".

Вы также можете использовать контейнер вокруг кода и добавить туда структурированную директиву.

person Thomas Renger    schedule 09.02.2021
comment
Спасибо! Я не уверен, почему я не подумал об этом, но это работает без проблем! - person MattE; 09.02.2021