如何在 ngFor 中的项目之间添加元素答案

【问题标题】：How to add an element between items within ngFor如何在 ngFor 中的项目之间添加元素
【发布时间】：2021-07-18 13:43:39
【问题描述】：

我有这个模板，我在其中循环遍历项目并创建一个按钮：

<div *ngFor="let button of buttons">
  <p>
    <button
      type="button"
      mat-raised-button
      color="primary"
    >
      {{ button.text }}
    </button>
  </p>
</div>

我想在按钮之间添加一个文本。

该列表可以包含 2 个以上的按钮，因此我希望在所有按钮之间显示相同的文本。我希望此文本按图片位于按钮之间的中心。

【问题讨论】：

标签： angular foreach ngfor angular-template

【解决方案1】：

如果不是最后一个按钮，请将您的文本插入中继器：

<div *ngFor="let button of buttons; let last=last">
  <p>
    <button
      type="button"
      mat-raised-button
      color="primary"
    >
      {{ button.text }}
    </button>
  </p>
  <div *ngIf="!last">
    Text
  </div>
</div>

【讨论】：

是的，它似乎有效，但是我现在确实遇到了这个问题，一旦放置在按钮之间的 div 中的文本没有居中。如何在按钮之间居中？
向div 添加一个类并使用css 对其进行样式设置-
您是否认为没有办法通过更改/改进布局来解决其他问题？ css 是唯一的选择吗？
就是这样...

【解决方案2】：

好吧，您可以简单地获取 *ngFor 的索引，例如 "*ngFor="let button of buttons;let i = index"" 然后

<div *ngFor="let button of buttons; let i = index">
  <p>
 
    <button
      type="button"
      mat-raised-button
      color="primary"
    >
      {{ button.text }}
    </button>
  </p>
       <div *ngIf="i== 2">this will show after the second iteration of the
  *ngFor</div>

</div>

【讨论】：