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

【问题标题】：How to use Angular ngFor to create Bootstrap navbar links如何使用 Angular ngFor 创建 Bootstrap 导航栏链接
【发布时间】：2020-10-05 12:54:15
【问题描述】：

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.com/edit/angular-ivy-sff2wk?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

标签： angular typescript ngfor

【解决方案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>

【讨论】：

ng-container 不能解决问题。如果您不相信，请说明。谢谢！
您应该添加我在
中提出的摘录，我正在编辑我的答案。

【解决方案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

【讨论】：