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

Question

该 Nav Link 1,Nav Link 2 和 Nav Link 3 按钮定义在 app.component.html 与。

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

另外三个导航链接 Nav Link 4, Nav Link 5 和 Nav Link 6 创立于

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

很显然，那些用了 *ngFor 指令的渲染方式不同，并且松开了任何样式。如何解决这个问题> 这里是Stackblitz项目的链接。

https:/stackblitz.comeditangular-ivy-sff2wk?file=src%2Fapp%2Fapp.component.html。

Answer 1

发生这种情况是因为你把 li 后面的标签 ul 标签...

所以你需要包括。

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

里面 ul 标签一样。

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

叉式Stackblitz这里

Answer 2

我建议使用 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>