Question

我正在尝试使用list-group-items创建一个列表组。但是，在列表组项目上执行ngFor时会出现角度创建的CSS错误。

但是我认为angular为每个list-group-item提供了bootstrap类： .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>

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

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

1 个答案: