时间戳

首页 > 解决方案 > 动态添加/删除多个输入字段后不清除输入（文本）字段值

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

问题描述

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

我感谢您的帮助！

这是我的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 文件中的代码：

字段数组：数组 = []；

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

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

标签： javascriptangularangular-materialangular10dynamic-forms

解决方案

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

就像下面的代码查看：

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

下面是 .ts 文件的代码：

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

推荐阅读