在角度6中添加新字段时，以前的字段将被清空

Question

点击按钮时，我正在动态添加一些输入字段，但是当我在一组字段中添加一些值并添加更多字段时，先前字段的值将被重置。

我正在使用ngfor在单击按钮时创建动态字段

HTML如下

  <div class="headerinput-field">

                        <mat-label>Headers </mat-label>
                        <br>
                        <a class="add-header" (click)="addHeader(header)">
                            <i class="material-icons">add_circle</i>
                        </a>

                        <div>
                            <div *ngFor="let header of header;let i=index;">
                                <div>
                                    <div class="mockinput-field">
                                        <div>
                                            <mat-label> Key{{i}}</mat-label>
                                        </div>
                                        <div>
                                            <mat-form-field appearance="outline" class="mockableformInner methodinput-field">
                                                <input matInput type="text" placeholder="Enter the key" name="test{{i}}" [(ngModel)]="header.headerkey" class="form-control" formControlName="header"
                                                    required />
                                            </mat-form-field>
                                        </div>
                                    </div>
                                    <div class="mockinput-field">
                                        <div>
                                            <mat-label class="label">Value</mat-label>
                                        </div>
                                        <div>
                                            <mat-form-field appearance="outline" class="mockableformInner methodinput-field">
                                                <input matInput type="text" placeholder="Enter the value" name="test2{{i}}" [(ngModel)]="header.headervalue" class="form-control" formControlName="header"
                                                    required />
                                            </mat-form-field>
                                            <a (click)="removeHeader(i)" class="add-params">
                                                <i class="material-icons">cancel</i>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

我的点击功能如下

 addHeader() {
    
    this.header.push({headerkey: this.headerkey, headervalue:this.headervalue} );
    console.log(this.headerkey);
  }

仍然存在以保留先前字段的值。我尝试用indes给出唯一的名称，但是它不起作用。