Problem
I am using ng2-select to implement a dropdown list function.
But my dropdown list cannot be showed just like the example:
Here is my code snippet:
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label> 負責人員 </label>
<div style="width: 300px; margin-bottom: 20px;">
<ng-select [allowClear]="true"
[items]="items"
[data]="selectedItem"
(data)="refreshValue($event)"
(selected)="selected($event)"
(removed)="removed($event)"
placeholder="請選擇負責人員">
</ng-select>
</div>
</div>
</div>
</div>
How-to
Owning to the data items in ng2-select example is static:
The data items in my function which will retrieve them from database, so we need to wait until data items had been finished then create the DOM element.
Owing to I do not know how long I need to wait, so I add *ngIf in the first div tag.
<div class="row" *ngIf="items && items.length > 0">
<div class="col-sm-12">
<div class="form-group">
<label> 負責人員 </label>
<div style="width: 300px; margin-bottom: 20px;">
<ng-select [allowClear]="true"
[items]="items"
[data]="selectedItem"
(data)="refreshValue($event)"
(selected)="selected($event)"
(removed)="removed($event)"
placeholder="請選擇負責人員">
</ng-select>
</div>
</div>
</div>
</div>
Reference
[1] https://valor-software.com/ng2-select/
