Angular 5 水平显示 *ngfor答案

【问题标题】：Angular 5 display *ngfor horizontallyAngular 5 水平显示 *ngfor
【发布时间】：2019-10-03 09:53:24
【问题描述】：

我正在使用最新版本构建我的第一个 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 加载这些信息时我该怎么做呢？如果我不能，你有什么建议？

【问题讨论】：

尝试将class="col-sm-12 links"更改为class="col-sm-2 links"。
我认为它与引导样式有关。尝试为您的 links 类添加具有行方向的 flex。在您的 CSS 中，添加：.links { display: flex; flex-direction: row }。如果它有效，并且您想通过 flex 获得一些乐趣，请查看css-tricks.com/snippets/css/a-guide-to-flexbox

标签： angular css ngfor angular5

【解决方案1】：

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

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

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

还有一个demo here

【讨论】：

啊，非常感谢，我用<div fxLayout="row" fxLayoutAlign="space-evenly center">

【解决方案2】：

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>

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

【讨论】：

为什么是浮点数？使用 display:inline-block
它也有效，但像 J-R Choiniere 所说的
更简单易行，但也谢谢你

【解决方案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.

【讨论】：