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时无法读取属性'$ ngoptionlabel'为null

1 个答案: