Angular 5 横向显示*ngfor

Question

我正在使用最新版本构建我的第一个 angular 应用程序，我需要一些帮助才能在特定位置显示一些信息。

app.component.ts:

socials = [
  {
    name: 'Github',
    icon: 'fa fa-github fa-2x',
    link: 'https://www.github.com/..';
  },
  {
    name: 'Twitter',
    icon: 'fa fa-twitter fa-2x',
    link: 'https://www.twitter.com/..';
  },
  {
    name: 'Keybase',
    icon: '',
    link: 'https://keybase.io/..';
  },
...
..
.

app.component.html:

<div class="footer">
  <div class="row">
    <div class="col-sm-12 links" *ngFor="let social of socials">
      <a href={{social.link}} target="_blank">
        <i class={{social.icon}} aria-hidden="true"></i>
        <span>{{social.name}}</span>
      </a>
    </div>
  </div>
</div>

所以这样显示： vertically :(

但我想像这样水平显示它：horizontally :)

那么在使用 *ngfor 加载这些信息时我该怎么做呢？如果我不能，你有什么建议我？

Answer 1

app.component.html:

    <div class="footer">
      <div class="row">
        <div class="col-sm-12 links" *ngFor="let social of socials">
    <div style="float:left;height:50px;"  [ngStyle]="{'width': 'calc(100% /' + socials.length + ')'}">
          <a href={{social.link}} target="_blank">
            <i class={{social.icon}} aria-hidden="true"></i>
            <span>{{social.name}}</span>
          </a>
        </div>
      </div>
    </div>
 </div>

Link: https://stackblitz.com/edit/angular-zd69fh?file=app/app.component.html

Answer 2

您可以使用包 Angular Flex Layout。您只需要使用 row 布局即可。

<div fxLayout="row">
    <div *ngFor...></div>
</div>

这是 @angular/flex-layout 库的 link。

还有一个demo here

Answer 3

我不知道你是否还需要这个，但只需 将你的 ngFor 包装成一行 div.

<div class="row">
  <div *ngFor="let item of itemList">
    <span class="ml-2 badge badge-pill badge-primary"> {{item?.name}} </span>
  </div>
</div>

Here's an example of what that might look like.

Angular 5 横向显示*ngfor

Angular 5 display *ngfor horizontally

css

ngfor

angular

angular5

app.component.html: