Question

我能够动态添加或删除多个输入字段，但问题是一旦我添加了项目并在输入字段中输入了一些值并使用删除按钮将其删除，值没有被清除，我试图清空我的该索引数组也是如此，但它不起作用。请问有什么建议吗？

感谢您的帮助！

这是我的 html 代码：

<div class="row">
   <div>
    <button mat-raised-button (click)="test()">Add </button>
   </div>
    <div *ngFor="let value of fieldArray; let i = index">
        <mat-form-field >          
          <input matInput value="{{getDataValue(i)}}" (focusout)="onFocusOut($event)"  name ="test">
          
        </mat-form-field>
        <button mat-raised-button class="btn btn-danger btn-sm "  (click)="remove(i)">Delete</button>
    </div>
</div>

.ts 文件中的代码：

fieldArray: Array = [];

 remove(i: number) {
    
    this.fieldArray.splice(i,1);
    
  }

test(){        
        this.fieldArray.push(this.fieldArray.length);       
   }

Answer 1

借助 TrackBy，Angular 能够使用唯一标识符检测哪些项目被删除或添加到数组中。因此，只需在 DOM 中更新添加或删除的项目。

喜欢下面的代码查看：

<div *ngFor="let value of fieldArray; let i = index; trackBy: trackByFn">

.ts 文件的以下代码：

trackByFn(index, item) {
    return index; // or item.id
}

动态添加/删除多个输入字段后不清除输入（文本）字段值

1 个答案: