时间戳

首页 > 解决方案 > 如何在重复的 NgFor 组件之间添加空格

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

问题描述

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

标签： htmlangular

解决方案

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

默认情况下，您嵌入的组件将通过显式将子属性设置为并应用以获得所需的间距ChildComponent，将其displaycss 属性设置为inline不受垂直边距（顶部和底部）的影响；使用伪类从最后一项中删除边距以获得干净的 UI 也是有意义的。displayblockmargin-bottom:last-child

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

// parent.css

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

推荐阅读