时间戳

首页 > 解决方案 > Angularr ngModel 并从数组中删除数据

javascript - Angularr ngModel 并从数组中删除数据

问题描述

我有一个空的 ngModel=titel，点击后，我在模板中添加了空输入字段。麻烦的是，我不能完全删除我不会删除的那个字段。我的拼接总是删除最后一个字段是我的 ts

应用程序.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  inputFields = [];

  addSome() {
    this.inputFields = ['', ...this.inputFields];
  }

  deleteSome(val: number) {
    console.log(val);

    const index = val;
    if (index !== -1) {
      this.inputFields.splice(index, 1);
    }

    console.log(index);
  }
}

和我的html

应用程序.html

<mat-icon (click)="addSome()">add</mat-icon>

<div class="form-group" *ngFor="let item of inputFields; index as i">
  <input type="text" class="form-control" name="price" [(ngModel)]="item[i]" />
  <mat-icon (click)="deleteSome(i)">delete</mat-icon>
</div>

和stackbiz：stackbiz

标签： javascripthtmlarraysangulartypescript

解决方案

我更新了您的stackblitz示例，这应该可以正常工作。在这里您可以找到更详细的示例。输入驯服应该是唯一的，而且你的[ngModel]映射也不好。

有一个解释

您正在迭代您正在编辑的项目，它们是原始值。ngFor 无法通过身份跟踪，因为当值从 1 更改为 3（通过编辑）时，它变成了不同的身份。要么使用按索引跟踪的自定义 trackBy，要么使用对象而不是原始值。

推荐阅读