Angular中使用ngFor动态添加输入项倒序排列如何解决

问题根因 #

你对justify-content-end的属性作用存在误解，同时倒序问题和布局方向有关：

• Bootstrap的row默认是flex布局，在常规LTR（从左到右）布局下，justify-content-end的作用是让所有子元素向容器右侧对齐，完全达不到你想要的「从左侧开始排列」的效果。
• 如果你的项目是RTL（从右到左，比如阿拉伯语、波斯语类语言场景）布局，flex主轴方向默认变为从右到左，justify-content-end会对应对齐到容器左侧，此时数组push新增的元素会排在最左侧，最终就会出现你遇到的添加顺序1、2、3、4，展示顺序4、3、2、1的倒序问题。

修复方案 #

场景1：常规LTR布局，无需适配从右到左语言 #

直接删除外层div的justify-content-end类即可，row默认就是左对齐、从左到右正序排列，新增元素会依次排在现有元素右侧，顺序和添加顺序一致。
修改后的外层HTML代码：

<div class='row'>
  <ng-container *ngFor='let input of dashAndInputCount; let i = index'>
     <button (click)='addDashAndInput(i)'> - </button>
     <div class='col-2' style='padding-top: 2.2rem !important;'>
        <input type='number'>
     </div>
     <div class='col-1 ax-text-center'>
        <p>
          ــ
        </p>
     </div>
  </ng-container>
</div>

如果需要元素整体靠右但保持正序，保留justify-content-end类即可，不会影响排列顺序。

场景2：需要保留RTL布局适配 #

给外层div添加flex-row-reverse类反转flex主轴方向，即可保持元素正序排列，可根据对齐需求调整justify-content相关类：

<div class='row flex-row-reverse justify-content-start'>
  <!-- 内部原有代码保持不变 -->
</div>

另外你当前的addDashAndInput方法中接收的索引参数i没有被使用，如果后续不需要做插入到指定位置、删除指定位置元素的逻辑，可以直接去掉这个入参。

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