Typescript 严格模式无法将 Observable 异步分配给 primeNg 下拉组件

Question

我正在使用 p-dropdown primeNg 组件，据我所知，它应该能够接受 Observable |异步值并正确使用它，但 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 中的数据，然后将该数据传递给选项，但异步管道的全部意义在于我不应该这样做。

有人对我需要做什么来解决 null 问题有什么建议吗？

Answer 1

异步管道 returns 数据类型或 null。你需要做的是使用 *ngIf="customers$ | async as customers" [options]="customers".

您还可以在代码周围使用一个容器，并在其中添加结构化指令。

Typescript 严格模式无法将 Observable 异步分配给 primeNg 下拉组件

Typescript strict mode cannot assign Observable async to primeNg dropdown component

typescript

primeng

angular

primeng-dropdowns

ngrx-entity