Отображение класса начальной загрузки в угловом NgFor NgStyle - PullRequest
Новая
       33

Отображение класса начальной загрузки в угловом NgFor NgStyle

2 голосов
/ 21 мая 2019

У меня есть меню навигации заголовка, которое я пытаюсь отобразить с помощью массива объектов машинописного текста с помощью начальной загрузки.Проблема, с которой я столкнулся, заключается в том, что вместо отображения по горизонтали, как при жестком кодировании, массив заставляет его отображать по вертикали.Я уверен, что это как-то связано с классами начальной загрузки, но я не уверен, как это исправить.

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",
},

],

1 Ответ

1 голос
/ 21 мая 2019

Вы повторяете тег <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>
...