angular - 使用 ng2-semantic-ui 在 select 中加载远程选项不起作用

标签 angular autocomplete zone zone.js ng2-semantic-ui

public optionsLookup(query:string, initial:any): Promise<any> {

      return new Promise (
        (resolve, reject) => /*[{ id: 1, name: 'ololo1'}, { id: 2, name: 'ololo2'}]*/
          this.apiService.get('private/countries', query)
          .then(res => resolve(res))


      );

  }
<sui-multi-select class="selection" [class.default]="false" [name]="fields[key].name" placeholder="{{fields[key].label}}" *ngIf="fields[key].type==fieldTypes.Tag" [(ngModel)]="fields[key].value" [options]="fields[key].options" labelField="{{fields[key].labelField}}" valueField="id"
                [isSearchable]="true" #multiSelect (blur)="saveField(fields[key].name)" [formControlName]="fields[key].name" [optionsLookup]="optionsLookup" [title]="fields[key].label" [hasLabels]="true">
                <sui-select-option *ngFor="let option of multiSelect.filteredOptions" [value]="option">
                </sui-select-option>
            </sui-multi-select>

我尝试使用 [optionsLookup] 但不知道如何使其工作,所以我编写了自己的函数。 但在 zone.js 完成此任务后,会显示占位符。

enter image description here

请帮我解决这个问题,或者给出一个如何使用 optionsLookup 的简短示例。

最佳答案

import { Component } from '@angular/core';
import { LookupFn } from 'ng2-semantic-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value;

  lookupFn(query: string, initial: any) {
    //replace with code that search using query and returns result
    return Promise.resolve([{ id: 1, name: '1' }, { id: 2, name: '2' }]);
  }
}
<sui-multi-select class="selection"
  [(ngModel)]="value"
  valueField="id"
  labelField="name"
  [optionsLookup]="lookupFn"
  [isSearchable]="true"
  #searchSelect>
  <sui-select-option
    *ngFor="let option of searchSelect.filteredOptions"
    [value]="option">
  </sui-select-option>
</sui-multi-select>

关于angular - 使用 ng2-semantic-ui 在 select 中加载远程选项不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49390201/

相关文章:

angular - 从 formArray 中删除 FormControl

angular - activateRoute 返回空对象

php - Eclipse 从类文件自动完成?

javascript - 如何在 Angular 中使用 zone.js?

c# - 无偏时间系统 C#

javascript - 为什么在 Angular 7 中更改路线时 Jquery 不加载?

angular - 在 Angular 2 CLI 中使用 Smooth Scroll Polyfill

WordPress 中的 jQuery 自动完成和特殊字符

c# - Linq 到 SQL : Aggregating over ||

java - Tapestry 5 : 2 dependent select fields using zone