Question

我有一个标题导航菜单，我正在尝试使用使用引导程序的打字稿对象数组来显示该菜单。我遇到的问题是，与其使它在进行硬编码时不像在水平方向那样显示，而是使数组显示为垂直。我确定它与bootstrap类有关，但是我不确定如何解决它。

console.timeEnd()

I guess I may have to use a attribute directive using ngStyle but again not sure how to get started! I tried this:

[ngClass]="button.class"

but got the same. I have view the "Similar questions" but not quite what I'm looking for. I have seen something like Angular Flex Layout but unfamiliar with it. Is it necessary to use the Angular Flex Layout to make this work?

<nav id="header-nav-container" class="btn btn-group navbar navbar-dark bg-primary container-fluid">
  <button id="header-nav-button-main" type="button" class="btn btn-primary font-weight-bolder bg-success" routerLink="/main">Main</button>
  <button id="header-nav-button-news" type="button" class="btn btn-primary font-weight-bold" routerLink="/news">News</button>
  <button id="header-nav-button-entertainment" type="button" class="btn btn-primary font-weight-bold" routerLink="/entertainment">Entertainment</button>
  <button id="header-nav-button-sports" type="button" class="btn btn-primary font-weight-bold" routerLink="/sports">Sports</button>
  <button id="header-nav-button-business" type="button" class="btn btn-primary font-weight-bold" routerLink="/business">Business</button>
  <button id="header-nav-button-society" type="button" class="btn btn-primary font-weight-bold" routerLink="/society">Society</button>
  <button id="header-nav-button-wellness" type="button" class="btn btn-primary font-weight-bold" routerLink="/wellness">Wellness</button>
  <button id="header-nav-button-food" type="button" class="btn btn-primary font-weight-bold" routerLink="/food">Food</button>
  <button id="header-nav-button-travel" type="button" class="btn btn-primary font-weight-bold" routerLink="/travel">Travel</button>
  <button id="header-nav-button-autos" type="button" class="btn btn-primary font-weight-bold" routerLink="/autos">Autos</button>
  <button id="header-nav-button-media" type="button" class="btn btn-primary font-weight-bold" routerLink="/media">Media</button>
</nav>

<nav *ngFor="let button of HeaderNavButton" id="header-nav-container" class="btn btn-group navbar navbar-dark bg-primary container-fluid">
    <button id="{{ button.id }}" type="button" class="{{ button.class }}" routerLink="{{ button.link }}">{{ button.text }}</button>
</nav>

]，

Answer 1

您正在重复 <nav>标签。您要重复<button>标签。

<nav id="header-nav-container" class="btn btn-group navbar navbar-dark bg-primary container-fluid">
     <button *ngFor="let button of HeaderNavButton" 
             id="{{ button.id }}" 
             type="button" 
             class="{{ button.class }}" 
             routerLink="{{ button.link }}">{{ button.text }}</button>
</nav>

在Angular NgFor NgStyle中显示Bootstrap类

1 个答案: