Question

我有一组项目，我一次只想显示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混乱，并且不会整齐地显示三个项目，而是会为所有十二个项目腾出空间，但一次只能显示3个项目。

有人对如何隐藏生成的ngFor div有任何想法吗？也许是将类应用于其父类并应用display：hidden之类。我也对非基于Flex-box的替代解决方案持开放态度。

预先感谢，如果需要进一步说明，请告诉我。

Answer 1

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

Answer 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>

Answer 3

为什么不创建一组显示和循环显示的组。如果您有其他需求，它将使其更易于操作。像这样：

 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;
}

Angular 6 + Bootstrap 4使ngFor div隐藏

3 个答案: