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

如何解决如何在 ngFor 内的项目之间添加元素

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

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

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

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

解决方法

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

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

,

好吧，您可以简单地获取 *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>