如何使用 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>

另外三个导航 links 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 指令创建的那些呈现方式不同并且没有任何样式。如何解决此问题> 这是 link 到 Stackblitz 项目：

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

Answer 1

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

Answer 2

这是因为您将 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>

Forked Stackblitz here

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

How to use Angular ngFor to create Bootstrap navbar links

angular

typescript

ngfor