Angular中调整*ngFor实例化元素展示结构，实现新元素底部追加

现有实现 #

我已实现向数组randomIntArray中添加随机数并展示的功能，代码如下：

<div *ngFor="let temp of randomIntArray; let i = index">
  <div *ngIf="i == randomIntArray.length - 1">
    This is the real random number {{ temp }}
    <div>
      <button (click)="addRandomValueIntoRandomIntArray()">
        add random number
      </button>
    </div>
  </div>

  <div *ngIf="i != randomIntArray.length - 1">
    {{ temp }}
  </div>
</div>

需求调整 #

目前每次点击addRandomValueIntoRandomIntArray()时，数组长度增加，DOM会创建新元素。当前通过*ngIf="i == randomIntArray.length - 1"让带按钮的元素始终作为最后一项显示，但我希望新创建的元素在底部向下排列，而非带按钮的元素每次被挤到最底部。

可行实现方式 #

核心思路是将按钮区域从循环中剥离，单独固定在列表底部，循环仅负责展示所有随机数：

<!-- 遍历展示所有随机数，新元素自动追加到列表末尾 -->
<div *ngFor="let temp of randomIntArray">
  {{ temp }}
</div>

<!-- 固定在底部的按钮区域，仅当数组有内容时显示 -->
<div *ngIf="randomIntArray.length > 0">
  This is the real random number {{ randomIntArray[randomIntArray.length - 1] }}
  <div>
    <button (click)="addRandomValueIntoRandomIntArray()">
      add random number
    </button>
  </div>
</div>

说明 #

• 所有随机数按添加顺序从上到下排列，新添加的数会自动出现在列表最后（按钮区域的上方）
• 按钮区域固定在页面最底部，不会随新元素的添加而移动
• 通过*ngIf="randomIntArray.length > 0"避免数组为空时访问randomIntArray[randomIntArray.length - 1]导致的报错

内容的提问来源于stack exchange，提问作者Damien Garlinge