angular - 使用 ng-select 时无法读取 null 的属性 '$ngoptionlabel'

Question

我正在使用 ng-select显示我的应用程序从 API 检索的数据，但尽管数据已成功检索，但下拉列表中未显示任何内容。它只是说“未找到任何项目”。在控制台中，我有以下错误:ERROR TypeError: Cannot read property '$ngoptionlabel' of null这是我的 typescript 代码:

// in a service, using HttpClient
this.http.get<string[]>(url);

// in a component, using the service injected in
data: string[] = [];
this.service.get()
   .subscribe(data => {
      this.data = data; // data contains values as expected
      // other logic
   });

在我的模板中，我通过 this.data至 ng-select .

<ng-select [items]="data"
           [multiple]="true"
           [closeOnSelect]="false"
           [searchable]="true">
</ng-select>

我认为该错误听起来可能与 bindLabel 有关。选项，但我没有使用它。错误是什么意思，我该如何解决？

Answer 1

该错误意味着正在显示的数组中的一项是 null .要解决此问题，请过滤 null在将数组传递给 ng-select 之前先将其移出数组.在从 API 检索数据的情况下，您可以使用 rxjs map运营商来实现这一点。

this.http
   .get<string[]>(url)
   .pipe(
      map(data => data.filter(x => x != null))
   );