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

Question

我正在使用 ng-select 来显示我的应用程序从 API 中检索到的数据，但尽管数据已成功检索到，但下拉列表中未显示任何内容。它只是说“找不到任何项目”。在控制台中我有以下错误：

ERROR TypeError: Cannot read property '$ngoptionlabel' of null

这是我的打字稿代码：

// 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))
   );

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

Cannot read property '$ngoptionlabel' of null when using ng-select

angular-ngselect

angular

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

Cannot read property '$ngoptionlabel' of null when using ng-select

angular-ngselect

angular

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