Question

Newbie Angular问题在这里。我有一个父组件，该组件调用一个返回单词数组的服务。然后，它将重复一个子组件，该子组件接受该单词并将其显示在按钮元素内。我想放个nbsp；在每个重复的按钮元素之间，但从事物的父侧开始。我尝试将各种标签放在标签之间，但似乎没有任何作用。谢谢

父母 [parent.component.html]

<child *ngFor="let item of items" [word]="item"></child>

孩子 [child.component.html]

<button type="button" class="btn btn-primary">{{word}}</button>

Answer 1

我知道OP希望在子组件之间添加一个nbsp;，但是值得一提的是这不是标记责任，而是CSS /样式责任。

默认情况下，您嵌入的组件ChildComponent的{{1}} css属性设置为display，不受垂直边距（顶部和底部）的影响，将子项inline的属性显式设置为display并应用block以获得所需的间距；还可以使用margin-bottom伪类从最后一项中删除边距以获得干净的UI。

通过应用此解决方案，您可以使用CSS :last-child将display属性设置为flex或inline-block以在桌面视图中水平分布子组件。

media queries

Answer 2

您可以包装子组件实例并包括另一个标签以在包装标签内部提供空间：

parent.component.html

<ng-container *ngFor="let item of items">
    <child [word]="item"></child>
    <span>&nbsp;</span>
</ng-container>

这将在每个按钮元素（包括最后一个按钮）之后放置一个空格，因此您可能想提供一种不为最后一个元素设置它的方法。可以使用*ngIf条件来完成，例如：

<ng-container *ngFor="let item of items; last as isLast">
    <child [word]="item"></child>
    <span *ngIf="!isLast">&nbsp;</span>
</ng-container>

编辑：

使用ng-container而不是div包装器元素。另外，请使用ngForOf last变量而不是index。从评论/其他答案中借来的。

Answer 3

以下代码将在数组的每个元素之间添加“，”。也许这种逻辑将帮助您实现这一目标，

getBounds onComplete {
   case Success(someOption) => myMethod(someOption)
       case Failure(t) => println("Error)
     }

随时询问有关我的代码的问题。

如何在重复的NgFor组件之间添加空格

3 个答案:

编辑：