问题描述
<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>