Angular 6 + Bootstrap 4 隐藏 ngFor div答案

【问题标题】：Angular 6 + Bootstrap 4 Making ngFor divs hiddenAngular 6 + Bootstrap 4 隐藏 ngFor div
【发布时间】：2018-12-25 16:44:34
【问题描述】：

我有一个项目数组，我想一次只显示 3 个。为此，我想做以下事情：

displayItems(input: number){
    return (Math.floor(input / 3) + 1 == this.page)
  };

<div class="d-flex flex-row justify-content-between align-items-center">
    <div *ngFor="let sItem of qls.itemArray; let i = index">
      <div *ngIf="qls.displayItems(i)" class="card">
        Test
      </div>
    </div>
  </div>

我知道这不会运行，我还是堆栈溢出的新手，所以我很抱歉，但这是我拥有的代码。本质上，它只会基于页面显示 3 个项目。问题是，ngFor 循环将为数组中的每个对象生成一个 div，它本身具有 display:block 附加到它。因此，它会与 flex 混淆，而不是一次整齐地显示三个项目，它会为所有 12 个项目腾出空间，但一次只能显示 3 个。

有人对如何隐藏生成的 ngFor div 有任何想法吗？也许某种将类应用到其父级并应用 display:hidden 或其他东西。我也对不基于 flex-box 的替代解决方案持开放态度。

提前致谢，如果需要进一步说明，请告诉我。

【问题讨论】：

使用代替 div

标签： angular twitter-bootstrap

【解决方案1】：

为什么不创建一个组数组来显示和循环它。如果您有其他需求，它会使操作变得更简单。比如：

 items: Item[];
displayItems: <Item[]>[];

constructor(
    private _service : YourService
)
{
    this._service
    .getItems
    .subscribe(items =>
       {
           this.items = items;
           this.displayItems = this.groupItems<Item>(items);
       }
    );
}

groupItems<T>(items: T[], groupSize: number)
{
    var groups = <T[]>[]; 
    for (i = 0; i < items.length; i += groupSize) 
    { 
        groups.push(items.slice(i, i + groupSize)); 

    } 

    return groups;
}

【讨论】：

【解决方案2】：

<div class="d-flex flex-row justify-content-between align-items-center">
  <ng-container *ngFor="let sItem of qls.itemArray; let i = index">
    <ng-container *ngIf="qls.displayItems(i)" class="card">
      Test
    </ng-container>
  </ng-container>
</div>

【讨论】：

嗨！为什么使用 ng-container 更好？我总是使用 div。与CSS有关的东西？还是原生控制器？
ng-container 是伪元素，div 是真实元素。它不会影响 CSS 类的深度

【解决方案3】：

在 ngfor 循环中使用 ng-container 标签代替 div 标签

【讨论】：

你能告诉我为什么吗？
因为 op 说他们不想渲染与 ngfor 循环关联的 div