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

Question

新手角度问题在这里。我有一个父组件，它调用一个返回单词数组的服务。然后，它将重复一个子组件，该子组件接受单词并将其显示在按钮元素内。我希望能够放一个 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将设置其displaycss 属性，inline该属性不受垂直边距（顶部和底部）的影响，通过显式设置子display属性block并应用margin-bottom以获得您需要的间距；:last-child使用伪类删除最后一项的边距以获得干净的 UI 也是有意义的。

通过应用此解决方案，您可以使用 CSS 设置display属性flex或inline-block在桌面视图中水平展开子组件media queries。

// parent.css

child {
  display: block;
  margin-bottom: 30px;
}
child:last-child {
  margin-bottom: 0;
}