Angualr ngModel и удалить данные из массива

Question

У меня пустой ngModel = title, при щелчке я добавляю пустое поле ввода в свой шаблон. Проблема в том, что я не могу удалить именно это поле, что не хочу. Мой splice всегда удаляет последнее поле, это мое 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>

и стекбиз: стекбиз

Answer 1

Я обновил ваш пример stackblitz , и он должен работать нормально. Здесь вы можете найти более подробную информацию пример . Приручение ввода должно быть уникальным, а также у вас было плохое отображение [ngModel].

Есть объяснение

Вы повторяете элементы, которые редактируете и это примитивные ценности. ngFor не может отслеживать по идентификатору, потому что, когда значение изменяется с 1 на 3 (путем редактирования), оно становится другим идентификатором. Либо используйте пользовательский trackBy, который отслеживает по индексу, либо используйте объекты вместо примитивных значений.

Answer 2

Самый важный момент заключается в том, что вы не должны использовать i на своем item.

item уже представляет каждый элемент в вашем списке, поэтому обращайтесь к нему напрямую.

Кроме того, вам нужно сделать свой массив массивом объектов, чтобы Angular мог их отслеживать. (В идеале вы не должны использовать простой счетчик для назначения свойств id, это только для демонстрационных целей. Вы также можете использовать этот идентификатор для удаления из массива, если хотите, используя фильтр et c.)

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)
  }
}

Альтернатива:

с использованием идентификатора и фильтра вместо индекса и сращивания для удаления элементов:

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)
  }
}

Answer 3

Splice отлично работает в вашем коде. Если вы проверите консоль, вы увидите, что при вводе значений в элементы управления вводом возникают ошибки.

Проблема в том, как вы используете ngModel для входов.

Аналогичный сценарий был упомянут в этом вопросе StackOverflow , принятый ответ - это решение проблемы.

В качестве альтернативы вы можете использовать Reactive Forms, чтобы легко реализовать свой вариант использования.

Я обновил ваш stackbliz . Здесь вы можете увидеть маги c и силу реактивных форм.

Я бы посоветовал вам использовать реактивные формы для создания лучших форм.