Angular ngModel 并从数组中删除数据答案

【问题标题】：Angualr ngModel and delete data from arrayAngular ngModel 并从数组中删除数据
【发布时间】：2020-10-10 16:34:19
【问题描述】：

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

app.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

app.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

【问题讨论】：

标签： javascript html arrays angular typescript

【解决方案1】：

最重要的一点是你不应该在你的item 上使用i。

item 已经代表您列表中的每个项目，因此请直接访问它。

此外，您需要将数组设为对象数组，以便 Angular 可以跟踪它们。（理想情况下，您不会使用简单的计数器来分配 id 属性，这仅用于演示目的。您也可以使用该 id，如果需要，使用过滤器等从数组中删除）

https://stackblitz.com/edit/angular-ivy-twsm7e

app.html:

<button (click)="addSome()">add</button>

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

app.ts

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

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

  addSome() {
    this.inputFields = [...this.inputFields, {text: "", id: this.currentId}];
    this.currentId ++;
    console.log(this.inputFields)
  }

  deleteSome(val: number) {
    console.log(val);    
    this.inputFields.splice(val, 1);
    console.log(this.inputFields)
  }
}

替代方案：

使用 id 和 filter 代替 index 和 splice 来删除项目：

app.html

<button (click)="addSome()">add</button>

<div class="form-group" *ngFor="let item of inputFields">
  <h6>{{item.id}}</h6>
  <input type="text" class="form-control" name="price" [(ngModel)]="item.text" />
  <button (click)="deleteSome(item.id)">delete</button>
</div>

app.ts

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

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

  addSome() {
    this.inputFields = [...this.inputFields, {text: "", id: this.currentId}];
    this.currentId ++;
    console.log(this.inputFields)
  }

  deleteSome(id: number) {
    console.log(id);    
    this.inputFields = this.inputFields.filter(item => item.id != id)
    console.log(this.inputFields)
  }
}

【讨论】：

【解决方案2】：

Splice 在您的代码中运行良好。如果查看控制台，可以看到在输入控件中输入值时出现错误。

问题在于您使用 ngModel 进行输入的方式。

StackOverflow 问题中提到了类似的情况，接受的答案就是问题的解决方案。

或者，您可以使用Reactive Forms 轻松实现您的用例。

我已更新您的stackbliz。您可以在这里看到反应式表单的魔力和威力。

我建议您使用响应式表单来构建更好的表单。

【讨论】：

【解决方案3】：

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

有一个explanation

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

【讨论】：