如何使用 ngx-select angular 6答案

【问题标题】：How to use ngx-select angular 6如何使用 ngx-select angular 6
【发布时间】：2018-06-06 11:33:03
【问题描述】：

HTML 代码：

<ngx-select [items]="items" [noAutoComplete]="true" [(ngModel)]="itemId" placeholder="No city selected" (focus)="doFocus()"
  (blur)="doBlur()" (open)="doOpen()" (close)="doClose()" (select)="doSelect($event)" (remove)="doRemove($event)" 
  (selectionChanges)="doSelectOptions($event)"></ngx-select>

TS 代码：

 public items: string[] = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
    'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
    'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin',
    'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg',
    'Hamburg', 'Hannover', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon',
    'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Málaga',
    'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome',
    'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart',
    'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław',
    'Zagreb', 'Zaragoza', 'Łódź'];



public doFocus = () => console.log('SingleDemoComponent.doFocus');

    public doBlur = () => console.log('SingleDemoComponent.doBlur');

    public doOpen = () => console.log('SingleDemoComponent.doOpen');

    public doClose = () => console.log('SingleDemoComponent.doClose');

    public doSelect = (value: any) => console.log('SingleDemoComponent.doSelect', value);

    public doRemove = (value: any) => console.log('SingleDemoComponent.doRemove', value);

    public doSelectOptions = (options: INgxSelectOption[]) => console.log('SingleDemoComponent.doSelectOptions', options);

即使执行了所有步骤，列表也不可见。我将 ul 列表的 CSS 更改为 opacity: 1.... 默认情况下它是 opacity:0。

有人知道这里出了什么问题吗？

我在这里关注的链接是

Angular ngx-选择

【问题讨论】：

如果你觉得我的回答有用。请投票并批准。

标签： angular6 angular-ngselect

【解决方案1】：

使用以下代码使列表可见。

<ngx-select  
  [formControl]="selectControl"
  [allowClear]="true" 
  [items]="selectItems" 
  optionValueField="optionId"
  optionTextField="optionTitle" 
  placeholder="Select...">
</ngx-select>

我创建了以下 stackblitz 示例。

https://stackblitz.com/edit/ngx-select-ex-example-formcontrol-wnbhgs

【讨论】：