ngFor的动态输入中未设置ngModel,带有add和remove选项

但是我遇到了一个问题,同一个ngModel被分配给所有的输入字段,并在add或remove按钮上设置输入字段reset。

<h3> Dynamic Input </h3>

<form (ngSubmit)="SubmitFnc($event)">
  <div *ngFor="let ItmVar of inputAryVar; let IdxVar=index" [attr.Idx]="IdxVar">
  <input type="text" name="field1" placeholder="Name Field"
    [(ngModel)]="ItmVar.nameLbl">&emsp;
    <button type="button" (click)="addDelBtnFnc(ItmVar,IdxVar)">
      {{ IdxVar == inputAryVar.length - 1  ? "[ + ]" : "[ - ]"}}
    </button>
  </div>
  <button > Submit </button>
</form>

角度TS代码:

export class AppComponent  {
  inputAryVar:any

  constructor() { }

  ngOnInit(){ 
  this.inputAryVar=[
    {
      "nameLbl":"Field1"
    },
    {
      "nameLbl":"Field2"
    },
    {
      "nameLbl":"Field3"
    }
  ]
  }

  addDelBtnFnc(itmVar, idxVar)
  {
    if(idxVar==this.inputAryVar.length-1)
    {
      this.inputAryVar.push({
      nameLbl:"Field"+(this.inputAryVar.length+1)
    })
    console.log(this.inputAryVar)
    }
    else
      this.inputAryVar.splice(idxVar,1)
  }

  SubmitFnc(event)
  {
    console.log(this.inputAryVar)
  }
}

The Code I tried is on Stackblitz

无法找出ngModel设置不正确的原因。