在 ngFor 期间删除和添加列表中的第一项或最后一项答案

【问题标题】：removing and adding first item or last item in lists during ngFor在 ngFor 期间删除和添加列表中的第一项或最后一项
【发布时间】：2018-06-29 23:05:40
【问题描述】：

我正在尝试使用列表组项创建一个列表组。但是，在对列表组项执行 ngFor 时，Angular 会创建一个 CSS 错误。

但是我认为 Angular 为每个 list-group-item 提供了以下引导类：.list-group-item:last-child 和 .list-group-item:first-child 。我在 chrome 开发人员工具中看到它，当我删除这些类时，列表正常显示。

这会产生一个视觉错误，即元素之间的边框更粗。有没有办法让这个行为正常？

我的代码：

组件模板在包含列表组的一侧

  <div id='highlight-list-viewer' class="col-md-12">
    <div class="list-group">
      <app-game-item
        *ngFor="let game of games; let i = index"
        [game]="game"
        [index]="i"
      >

      </app-game-item>
    </div>
  </div>

带有 list-group-item 的组件模板

<a class="list-group-item list-group-item-action flex-column align-items-start" (click)="onGetHighlights()">
  ...STUFF
</a>

【问题讨论】：

标签： angular bootstrap-4

【解决方案1】：

我将a href 提取到解决问题的外部模板中。

  <div id='highlight-list-viewer' class="col-md-12">
    <div class="list-group">
      <a class="list-group-item list-group-item-action flex-column align-items-start" *ngFor="let game of games">
      <app-game-item [game]="game">
      </app-game-item>
      </a>
    </div>
  </div>

【讨论】：