首页 > 解决方案 > Bootstrap Dropdown Angular 4无法正常工作

问题描述

我正在使用 Bootstrap 下拉列表来显示列表中的内容。第一次将 Bootstrap 与 Angular 4 一起使用,但它不能正常工作。我在“Varukorg”中有三个项目,但它显示在彼此而不是对齐。

在此处输入图像描述

<li *ngIf="user.personId != 2">
  <div class="dropdown" style="color:gray;">
    <span class="glyphicon glyphicon-shopping-cart" style="color:antiquewhite; margin-top:15px;">
    </span>
     Varukorg
       <div class="numberCircle" *ngIf="count != 0">
         <h6 style="margin-top:-6px; margin-left:-3px;">{{count}}
         </h6>
       </div>
       <div>
         <ul class="dropdown-content" *ngFor="let items of list">
           <li style="margin-left:-10px;">
              {{items.name}} - {{items.price}}
           </li>
        </ul>
     </div>
   </div>
</li>

标签: angularbootstrap-4

解决方案


ngFor应该在 li 元素上并删除自定义边距

<ul class="dropdown-content" >
           <li *ngFor="let items of list"">
              {{items.name}} - {{items.price}}
           </li>
</ul>

推荐阅读