在 Angular NgFor NgStyle 中显示 Bootstrap Class

Question

我有一个 header 导航菜单，我正在尝试使用 bootstrap 使用打字稿 object 数组来显示它。我遇到的问题是，数组不是像硬编码时那样水平显示，而是垂直显示。我确定它与 bootstrap 类有关，但我不确定如何修复它。

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>

public HeaderNavButton = [
{
    text: "main",
    link: "/main",
    id: "header-nav-button-main",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "news",
    link: "/news",
    id: "header-nav-button-news",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "entertainment",
    link: "/entertainment",
    id: "header-nav-button-entertainment",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "sports",
    link: "/sports",
    id: "header-nav-button-sports",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "business",
    link: "/business",
    id: "header-nav-button-business",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "society",
    link: "/society",
    id: "header-nav-button-society",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "wellness",
    link: "/wellness",
    id: "header-nav-button-wellness",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "food",
    link: "/food",
    id: "header-nav-button-food",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "travel",
    link: "/travel",
    id: "header-nav-button-travel",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "autos",
    link: "/autos",
    id: "header-nav-button-autos",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "media",
    link: "/media",
    id: "header-nav-button-media",
    class: "btn btn-primary font-weight-bold",
},

],

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 Class

Displaying Bootstrap Class In Angular NgFor NgStyle

ng-style

bootstrap-4

ngfor

angular-flex-layout

angular