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

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>