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:
所以它显示如下:垂直:(
但我想像这样水平显示它:水平:)
那么我如何在使用 *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屋!