Question

HTML code：

<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更改为不透明度：1 ....默认情况下，它是不透明度：0。

有谁知道这里有什么问题吗？

我在这里关注的链接是

Angular ngx-select

Answer 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

如何使用ngx-select angular 6

1 个答案: