Angular循环中用管道过滤数据，解决元素空白间距问题

问题根源 #

你当前的代码中，*ngFor会遍历所有Data元素并生成外层的.flex-child1 div，即便内部内容通过*ngIf隐藏，这个空的外层div依然存在，它会占据flex容器的空间，导致X、Y之间出现多余空白。另外代码里的shwcol.dshow是笔误，应该改为shw.dshow，否则过滤条件不生效。

具体修复方案 #

方案1：将过滤条件移到外层div（使用<ng-container>避免元素冲突）

Angular中不建议在同一个元素上同时使用*ngFor和*ngIf，可以用<ng-container>包裹遍历逻辑，只对符合条件的项生成外层div：

<ng-container *ngFor="let shw of Data; let i=index">
  <div class="flex-child1 btn-group" *ngIf="shw.dshow === false">
    <input type="checkbox" class="btn-check" name="{{shw.name}}" id="{{shw.name}}" autocomplete="off">
    <label class="btn btn-outline-primary" for="{{shw.name}}">{{shw.name}}</label>
  </div>
</ng-container>

方案2：在组件中提前过滤数据

在组件类中定义一个过滤后的数组，直接遍历该数组，避免在模板中处理过滤逻辑：

// 组件类中添加
filteredData = this.Data.filter(item => !item.dshow);

模板代码修改为：

<div class="flex-child1 btn-group" *ngFor="let shw of filteredData; let i=index">
  <input type="checkbox" class="btn-check" name="{{shw.name}}" id="{{shw.name}}" autocomplete="off">
  <label class="btn btn-outline-primary" for="{{shw.name}}">{{shw.name}}</label>
</div>

方案3：调整CSS优化紧凑布局

如果需要更紧凑的排列，可以修改.flex-child1的flex属性，让元素按内容宽度自适应：

.flex-child1 {
  flex: 0 0 auto; /* 不拉伸，不收缩，按内容宽度显示 */
  margin-right: 4px; /* 可选：手动控制项之间的小间距 */
}

内容的提问来源于stack exchange，提问作者user20042770