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

Question

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 完成此任务后，会显示占位符。

请帮我解决这个问题，或者举一个简短的例子来说明如何使用 optionsLookup。

Answer 1

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>

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

remote options loading in select using ng2-semantic-ui not working

autocomplete

zone

zone.js

angular

ng2-semantic-ui