时间戳

首页 > 解决方案 > 使用 ng-select 时无法读取 null 的属性“$ngoptionlabel”

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

问题描述

我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选项有关，但我没有使用它。错误是什么意思，我该如何解决？

标签： angularangular-ngselect

解决方案

该错误意味着正在显示的数组中的一项是null. 为了解决这个问题，null在将 s 传递给 之前从数组中过滤掉ng-select。在从 API 检索数据的情况下，您可以使用 rxjsmap运算符来实现此目的。

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

推荐阅读