角度5显示* ngfor水平 [英] Angular 5 display *ngfor horizontally

问题描述

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

i'm building my first angular app using latest version and i need some help to display some informations in a specific position.

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>

这样显示如下: 垂直:(

但是我我想这样水平显示:水平:)

but me i want to display it horizontally like this: horizontally :)

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

so how can i do that while using *ngfor to load those informations ? if i cant , what do you advice me?

推荐答案

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

You could use the package Angular Flex Layout. You just have to use the row layout.

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

这里是 @ angular/flex-layout 库的链接.

还有在此处演示

这篇关于角度5显示* ngfor水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！