Question

I am creating a sidebar menu. The code is shown here:

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{brandsTitle}}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2" *ngFor="let menu of brandsMenu">
    <li class="m-b-pt5">{{menu.type}}</li>
  </ul>
</div>

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{washersTitle}}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2 line-ht-1pt5" *ngFor="let menu 
    of washersMenu"> 
    <li class="m-b-pt5">{{menu.type}}</li>
  </ul>
</div>

The first segment of code creates the brand menu but the items are created on the same line instead of appearing on a new line as shown here. Some items have no space between them.

Appliance Brands
AmanaWhirlpool
FrigidaireGEMaytag
Samsung

I expect:

Appliance Brands
Amana
Whirlpool
Frigidaire
GE
Maytag
Samsung

The second segment of code produces the washer menu as expected.

Washers
Top Load Washers
Front Load Washers
Unitized Washers & Dryers

Answer 1

If you want each menu in it's own li, the *ngFor needs to appear on that element, not the ul.

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{ brandsTitle }}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2">
    <li class="m-b-pt5" *ngFor="let menu of brandsMenu">{{ menu.type }}</li>
  </ul>
</div>

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{ washersTitle }}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2 line-ht-1pt5"> 
    <li class="m-b-pt5" *ngFor="let menu of washersMenu">{{ menu.type }}</li>
  </ul>
</div>

See: https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor for more information.

Additionally, if you want a vertical nav in Bootstrap, you need:

<ul class="nav flex-column">
  <li class="nav-item" *ngFor="let menu of washersMenu">
    <a class="nav-link">{{ menu.type }}</a>
  </li>
</ul>

See: http://getbootstrap.com/docs/4.1/components/navs/#vertical

Answer 2

I agree with Brandon, unless you want to create a bunch of ul elements place the ngFor on the li element.

However that's not your problem...

Because even then multiple ul elements should line break. The issue is your ul class="nav-pills". Bootstrap places the li items inline. So either remove the class or override it with dipslay:block so that each ul (or li) line breaks.

Bootstrap <li> element not creating new line

2 个答案: