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

问题描述

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

app.component.ts:

socials = [{名称:'Github',图标:'fa fa-github fa-2x'，链接:'https://www.github.com/..';},{name: '推特',图标:'fa fa-twitter fa-2x'，链接:'https://www.twitter.com/..';},{名称:'密钥库'，图标: ''，链接:'https://keybase.io/..';},......

app.component.html:

<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>

所以它显示如下:垂直:(

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

那么我如何在使用 *ngfor 加载这些信息时做到这一点?如果我不能，你有什么建议?

解决方案

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

<div *ngFor...></div>

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

还有一个演示

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>

so this display it like this: vertically :(

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

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

解决方案

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

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

Here is a link to the @angular/flex-layout library.

And a demo here

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