Angular中带有* ngfor的右浮动按钮答案

【问题标题】：Right float button with *ngfor in AngularAngular中带有* ngfor的右浮动按钮
【发布时间】：2018-02-20 01:54:27
【问题描述】：

我在 Angular 中创建了一个带有反应式表单的表单。

其实我有这个显示：

<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>

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

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

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

这是 CSS

.formcontainer  {
    display: inline-block;
}

但仍然没有我想要的：

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

【问题讨论】：

您是否要为每个输入设置“加号”按钮？如果是这样，则将 html for plus 按钮放在 ngFor 循环中

标签： html css angular

【解决方案1】：

你应该在你的按钮中设置一个条件，如果达到数组的长度就显示它

<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>
        <button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn" *ngIf="i===GroupRMPM_FG.controls.GroupId_Name.controls.length-1"></button>
       </div>       
    </form>
 </div>

【讨论】：

这也是我的解决方案。但我会将let last = last 添加到 ngFor 并将其替换为按钮条件。

【解决方案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>

【讨论】：

【解决方案3】：

以引导程序pull-right 类为模型的答案：

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

【讨论】：