Blank white space display on select option drop down although it bind data correctly?

Question

User696604810 posted

I create dynamic drop down on angular 7 on run time but my problem is when open select option it show

white space on select option although it bind data correctly and fill correctly but my issue

How to remove blank white space when i make bind to data ?

Here below i create drop down dynamically with name and fill it

<div class="form-group" style="display: flex; align-items: center;margin-top:10px;margin-left:20px;">  
         <div *ngFor="let fil of FilterList" style="padding-bottom: 10px;margin-right: 10px;">  
           {{fil.controlName | slice:3:15}}     
           <Select id="{{fil.controlName}}" (change)="onChange($event)" class="form-control"  
             style="width:200px; margin-right:10px;" >  



             <option value="0">-Select-</option>  

             <option *ngFor="let fil2 of this.FilterBinddata" >  
               <div *ngIf="fil.controlName===fil2.filterName ">  
                 {{fil2.reportSource}}  
               </div>  
             </option>  




           </Select>  

           <div>  
           </div>  

         </div>  

       </div> 

see image below 

http://www.mediafire.com/view/96lkuvvb1fq64va/blank_drop_down.png/file

Answer 1

User-474980206 posted

a <div> Is not valid inside an <option>. Don’t know if angular has a dummy tag to use in this case like react's <></>

Answer 2

User303363814 posted

<option *ngFor="let fil2 of this.FilterBinddata.filter(d => d.filterName === fil.controlName" >
   {{fil2.reportSource}}  
</option>