ngIf在Angular 6中未按预期工作

我有一个场景，我需要像这样从最下面的行添加行，从最上面的行删除行

例1：最初

第1行添加

例2：添加一行后

第1行删除

第2行添加

如果ngIf不接受条件，我如何使用以下代码实现此目标。请建议我如何实现此目标

*.component.html

<div class="container">
  <div class="row">
    <div class="col-lg-12">

      <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
        <div class="form-group">
          <div class="row">
            <span class="col-lg-4">Program Name </span>
            <span class="col-lg-4">Start Date </span>
            <span class="col-lg-4">End Date </span>
          </div>
          <div class="row">
            <span class="col-lg-4">
              <input type="text" class="form-control" formControlName="programName">
            </span>
            <span class="col-lg-4">
              <input type="text" class="form-control" formControlName="startDate">
            </span>
            <span class="col-lg-4">
              <input type="text" class="form-control" formControlName="endDate">
            </span>
          </div>
          <div class="row">
            <span class="col-lg-4">
              <small *ngIf="!myForm.controls.programName.valid" class="text-danger">
                Program Name is required.
              </small>
            </span>
            <span class="col-lg-4">
              <small *ngIf="!myForm.controls.startDate.valid" class="text-danger">
                Start Date is required.
              </small>
            </span>
            <span class="col-lg-4">
              <small *ngIf="!myForm.controls.endDate.valid" class="text-danger">
                End Date is required.
              </small>
            </span>
          </div>
        </div>
        <!--addresses-->
        <div formArrayName="programCategorys">
          <div *ngFor="let address of myForm.controls.programCategorys.controls; let i=index;trackBy: trackByFn" class="panel panel-default">
            <div [formGroupName]="i">
              <div class="container">
                <div class="row" *ngIf="i==0">
                  <span class="col-lg-3">
                    <label>Category Name</label>
                  </span>
                  <span class="col-lg-2">
                    <label>Max Points</label>
                  </span>
                  <span class="col-lg-2">
                    <label>Max Score</label>
                  </span>




                  <span class="col-lg-5" *ngIf="myForm.controls.programCategorys.controls.length === i"  >
                      <a (click)="addAddress()" style="cursor: default">
                           +Add{{i}}
                        </a>
                    </span>



                    <span class="col-lg-5" *ngIf="myForm.controls.programCategorys.controls.length < i" (click)="removeAddress(i)">D{{i}}L</span>


                </div>
                <div class="row">
                  <span class="col-lg-4">
                    <input type="text" class="form-control" formControlName="categoryName">
                    <small [hidden]="myForm.controls.programCategorys.controls[i].controls.categoryName.valid" class="text-danger">
                      CategoryName is required
                    </small>
                  </span>
                  <span class="col-lg-3">
                      <input type="text" class="form-control" formControlName="maxPoints">
                      <small [hidden]="myForm.controls.programCategorys.controls[i].controls.maxPoints.valid" class="text-danger">
                        Max Points is required
                      </small>
                    </span>
                    <span class="col-lg-3">
                        <input type="text" class="form-control" formControlName="maxScore">
                        <small [hidden]="myForm.controls.programCategorys.controls[i].controls.maxScore.valid" class="text-danger">
                          Max Score is required
                        </small>
                      </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="margin-20">

        </div>

        <div class="margin-20">
          <button type="submit" class="btn btn-primary pull-right" [disabled]="!myForm.valid">Submit</button>
        </div>
        <div class="clearfix"></div>

        <div class="margin-20">
          <div>myForm details:-</div>
          <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
          <pre>form value: <br>{{myForm.value | json}}</pre>
        </div>
      </form>
    </div>
  </div>
</div>

程序名
开始日期
结束日期
程序名是必需的。
开始日期是必需的。
结束日期是必需的。
类别名称
最大点数
最高分数
+添加{{i}
D{{i}}L
CategoryName是必需的
最高分数是必需的
最高分数是必需的
提交
我的表格详情：-
myForm有效吗？：
{{myForm.valid | json}
表单值：
{{myForm.value | json}

*.component.ts

myForm.controls.programCategorys.controls.length === i

从'@angular/core'导入{Component，OnInit}；
从“./programcreator.service”导入{ProgramcreatorService}；
从'@angular/forms'导入{FormGroup，FormControl，Validators，FormBuilder，FormArray}；
从“@angular/forms”导入{ReactiveFormsModule}
@组成部分({
选择器：“应用程序程序创建者”，
templateUrl:'./programcreator.component.html'，
样式URL:['./programcreator.component.scss']
})
导出类ProgramcreatorComponent在NIT上实现{
公共myForm:FormGroup；
构造函数（私有_fb:FormBuilder）{}
恩戈尼尼特（）{
this.myForm=this.\u fb.group({
程序名：[''，[Validators.required，Validators.minLength（5）]，
起始日期：[''，[Validators.required，Validators.minLength（5）]，
结束日期：[''，[Validators.required，Validators.minLength（5）]，
程序类别：此。\u fb.array([
此.initAddress（），
])
});
}
initAddress（）{
将此返回。\u fb.group({
categoryName:[''，验证器。必需]，
maxPoints:[''，验证器。必需]，
maxScore:[''，验证器。必需]
});
}
addAddress（）{
const control=this.myForm.controls['ProgramCategoris']；
control.push（this.initAddress（））；
}
removeAddress（i:编号）{
const control=this.myForm.controls['ProgramCategoris']；
控制。移除（i）；
}
保存（型号：客户）{
//调用API保存
// ...
console.log（模型）；
}
}
出口接口客户{
程序名：字符串；
起始日期：日期；
结束日期：日期；
地址:地址【】;；
}
导出接口地址{
街道：字符串；
邮政编码:string ;；
}

看起来不错。。。虽然

myForm.controls.programCategorys.controls.length < i

---

因此，只有当数组中没有值时才会显示标题？

您的两个条件完全错误：

只有当索引

i

（从

0

到

length-1

包含）等于length时，这才是真的。所以它总是假的

myForm.controls.ProgramCategoris.controls.length

只有当索引

i

（从

0

到

length-1

包含）大于length时，才会出现这种情况。所以它总是假的

第一个条件应该是

i==0&&myForm.controls.ProgramCategoris.controls.length>1

，以检查

i

是否为第一行的索引，以及是否有多行

---

第二个条件应该是

i==myForm.controls.programCategorys.controls.length-1&&myForm.controls.programCategorys.controls.length>1

，以检查

i

是最后一行的索引，并且有多行。

哪一个

*ngIf

不工作？您正在看到的行为是什么？如果ngIf=“I！=0”不起作用，我正在观察的行为仅显示最上面一行。

myForm.controls.programCategorys.controls.length === i

myForm.controls.programCategorys.controls.length < i