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

Question

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

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

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

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

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

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

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

How to add an element between items within ngFor

angular

foreach

ngfor

angular-template