Bootstrap Dropdown Angular 4无法正常工作

时间:2018-07-09 17:21:27

标签: angular bootstrap-4

我正在使用Bootstrap下拉列表显示列表中的内容。首次将Bootstrap与Angular 4结合使用时,它无法正常工作。我在“ Varukorg”中放了三个物品,但它们彼此显示而不是排成一行。

enter image description here

<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>

2 个答案:

答案 0 :(得分:1)

您正在为“列表”变量中的每个项目创建一个新的“ ul”元素。您应将* ngFor指令移至“ li”元素上。

len(miniList)

答案 1 :(得分:1)

Data 应该位于li元素上,并删除自定义边距

TransferUtility