选择选项上的空白空白下拉框虽然正确地绑定了数据？

Question

我在运行时在angular 7上创建了动态下拉菜单，但我的问题是打开显示它的select选项时，它显示>]

选择选项上的空白，尽管它可以正确绑定数据并正确填充，但是我的问题

当我绑定到数据时如何删除空白？

下面，我用名称动态创建下拉列表并填写它

<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>  
我的图像问题如下：

回复线程的结果

我在运行时在angular 7上创建了动态下拉菜单，但我的问题是，打开select选项时，尽管正确绑定数据并正确填充，但在select选项上却显示空白，但是我的问题...

Answer 1

您使用的条件未发送回true ...当条件发送为false时，将在div为NOT时创建该选项。导致该选项在那里并且没有任何内容，因此显示为空白。因此，更好的方法是在选择之前创建一个ng容器，并将其用于* ngFor循环遍历filterBinddata。在将* ngIf设置为选项标签本身时...