1
votes

Angular ngModel et supprimer les données du tableau

J'ai un ngModel = titel vide, en cliquant, j'ajoute un champ de saisie vide dans mon modèle. Le problème est que je ne peux pas supprimer exactement ce champ ce que je ne veux pas. Mon épissure supprime toujours le dernier champ il y a mon ts

app.ts

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

et mon html

app.html

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

et stackbiz: stackbiz a >

javascript typescript angular html arrays

0 commentaires

3 Réponses :

0
votes

Splice fonctionne correctement dans votre code. Si vous vérifiez la console, vous pouvez voir qu'il y a des erreurs lors de la saisie de valeurs dans les contrôles d'entrée.

Le problème vient de la façon dont vous utilisez le ngModel pour les entrées.

Un scénario similaire a été mentionné dans cette question StackOverflow , la réponse acceptée est la solution au problème.

Vous pouvez également utiliser les formulaires réactifs pour réaliser votre cas d'utilisation facilement.

J'ai mis à jour votre stackbliz . Vous pouvez voir la magie et la puissance des formes réactives ici.

Je vous suggère d'utiliser des formulaires réactifs pour créer de meilleurs formulaires.

0 commentaires

1
votes

J'ai mis à jour votre stackblitz exemple et cela devrait fonctionner correctement. Vous trouverez ici des informations plus détaillées sur exemple . L'entrée apprivoisée doit être unique et vous avez également un mauvais mappage de [ngModel] .

Il existe une explication

Vous itérez les éléments que vous modifiez et ce sont des valeurs primitives. ngFor ne peut pas effectuer le suivi par identité car lorsque la valeur passe de 1 à 3 (en modifiant), elle devient une identité différente. Soit utiliser un trackBy personnalisé qui suit par index, soit utiliser des objets au lieu de valeurs primitives.

0 commentaires

1
votes

Le point le plus important est que vous ne devez pas utiliser i sur votre item .

élément représente déjà chaque élément de votre list, alors accédez-y directement.

De plus, vous devez faire de votre tableau un tableau d'objets, afin qu'Angular puisse les suivre. (Idéalement, vous n'utiliseriez pas un simple compteur pour attribuer des propriétés d'identifiant, c'est juste à des fins de démonstration. Vous pouvez également utiliser cet identifiant, pour supprimer du tableau si vous le souhaitez, en utilisant un filtre, etc.)

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

app.html:

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

app.ts

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

Alternative:

en utilisant l'identifiant et le filtre au lieu de l'index et de l'épissure, pour supprimer des éléments:

app.html

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.ts p>

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

0 commentaires