右侧浮动按钮，在Angular中带有* ngfor

Question

我在Angular中创建了一个带有Reactive Forms的表单。

其实我有这个显示：

AppModule

我希望我的按钮与最后一个减号按钮对齐。

我在ngfor div中添加了一个类：

<div class="center" appMcard>
   <form [formGroup]="GroupRMPM_FG">
      <div formArrayName="GroupId_Name"  *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">
         <input  type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
         <button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
         </button>
      </div>
      <button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn"></button>
   </form>
</div>

这是CSS

<div formArrayName="GroupId_Name" class="formcontainer"  *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">

但仍然没有我想要的东西：

如何获取最后一个减号按钮右侧的“+”图标？

Answer 1

你应该在你的按钮中添加一个条件，并在达到数组的长度时显示它

window={}

Answer 2

嘿，我认为你的方法几乎是正确的，但你必须包装你的循环容器......此外，flexbox应该解决对齐问题（还有其他方法可以解决这个问题）：

 <form [formGroup]="GroupRMPM_FG" style="display: flex; flex-direction: row; justify-content: flex-end">
    <div style="display: inline-block">   
       <div formArrayName="GroupId_Name" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">
       <input  type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
       <button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
     </button>
    <button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn"></button>
 </form>

Answer 3

以bootstrap pull-right class：

为模型的答案

HTML

<button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn pull-right"></button>

CSS

.pull-right{
  float:right
}

这是我用https://jsfiddle.net/cwpuj0qz/1/

进行实验的JsFiddle