使用 ngFor 将项目左对齐

Posted 2023-03-05

【中文标题】使用 ngFor 将项目左对齐

【英文标题】：Align items to left with ngFor

【发布时间】：2021-12-25 08:24:59

【问题描述】：

我有一个 div，我想在其中动态添加一些输入，并且由于输入应该是一个具有格式的数字，我添加 justify-content-end 类以从左侧开始。 html：

<div class='row justify-content-end'>
  <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'></input>
     </div>
     <div class='col-1 ax-text-center'>
        <p>
          ــ
        </p>
     </div>
  </ng-container>
</div>

TS：

  addDashAndInput(i) 
    this.dashAndInputCount.push(1);
  

现在的问题是，当我添加一个项目时，该项目的添加方向错误。例如，如果我在行中添加 1、2、3、4，我将得到 4、3、2、1。我该如何解决这个问题？

【问题讨论】：

使用 unshift 将新的添加到开头。 this.dashAndInputCount.unshift(1);

您的解决方案对我来说听起来很合理，但不幸的是对代码来说不是！ @NaeimFard

【参考方案1】：

justify-content 属性依赖于 display: flex 您应该将 display: flex 添加到 justify-content-end 类

.justify-content-end
   display: flex;
   justify-content: end;

【参考方案2】：

在容器中包含 d-flex 类。使用 d-flex 元素的行为类似于块元素，并根据flexbox model 布置其内容。