如何使用 Angular ngFor 创建 Bootstrap 导航栏链接

Question

The Nav Link 1 , Nav Link 2 and Nav Link 3 buttons are defined in app.component.html with:

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" (click)="onNavClick()" >Nav Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" (click)="onNavClick()" >Nav Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" (click)="onNavClick()" >Nav Link 3</a>
  </li>
</ul>

Another three nav links Nav Link 4 , Nav Link 5 and Nav Link 6 are created with

<li class="nav-item" *ngFor="let name of names">
    <a class="nav-link" >{{name}}</a>
</li>

Apparently, the ones that were created with *ngFor directive are rendered differently and loose any styling. How to fix this issue> Here is the link to Stackblitz project:

https://stackblitz.com/edit/angular-ivy-sff2wk?file=src%2Fapp%2Fapp.component.html

Answer 1

It happens because you are placing li tag after ul tag..

So you need to include,

<li class="nav-item" *ngFor="let name of names">
    <a class="nav-link" >{{name}}</a>
</li>

inside ul tag like,

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" (click)="onNavClick()" >Nav Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" (click)="onNavClick()" >Nav Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" (click)="onNavClick()" >Nav Link 3</a>
  </li>
  <li class="nav-item" *ngFor="let name of names">
    <a class="nav-link" >{{name}}</a>
  </li>
</ul>

Forked Stackblitz here

Answer 2

I would recommend to use ng-container

<ul class="navbar-nav mr-auto">
....
  <ng-container *ngFor="let name of names">
    <li class="nav-item">
      <a class="nav-link" >{{name}}</a>
    </li>
  </ng-container>
</ul>