Question

我试图在牌组中最多显示2张牌。如果还有其他要显示的牌，则应将它们放在新牌组中，低于前一张牌。

我怎样才能做到这一点？我在哪里可以指定每个牌组的最大牌数？

HTML看起来像这样（带有一点Angular）：

<div class="card-deck">
  <div *ngFor="let item of dataService.getItems()" class="card">
    <div class="card-body">
      <h4 class="card-title">{{ item.title }}</h4>
      <p class="card-text">{{ item.content }}</p>
      <p class="card-text"><small class="text-muted">Item ID: {{ item.id }}</small></p>
    </div>
    <div class="card-footer">
      <div class="text-right">
        <div class="btn-group" role="group" aria-label="Controls">
          <button type="button" class="btn btn-primary btn-sm">Reply</button>
          <button type="button" class="btn btn-danger btn-sm">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

从Obsidian Age的建议中获得灵感解决了这个问题。

更改dataService.getItems()，以便返回包含2个项目的组。

<div *ngFor="let group of dataService.getItems()" class="card-deck my-3">
  <div *ngFor="let item of group" class="card">
    <div class="card-body">
      <h4 class="card-title">{{ item.title }}</h4>
      <p class="card-text">{{ item.content }}</p>
      <p class="card-text"><small class="text-muted">Item ID: {{ item.id }}</small></p>
    </div>
    <div class="card-footer">
      <div class="text-right">
        <div class="btn-group" role="group" aria-label="Controls">
          <button type="button" class="btn btn-primary btn-sm">Reply</button>
          <button type="button" class="btn btn-danger btn-sm">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

在Bootstrap 4

1 个答案: