2
votes

Comment remplir un tableau d'objets à partir d'une liste de sélection et des cases à cocher et utiliser ce tableau dans un tableau

Je souhaite créer un tableau d'objets et utiliser ce tableau dans une table. Le tableau recevra les données d'une liste et de certaines cases à cocher. Le problème principal est que si l'utilisateur choisit un autre produit dans une liste, le tableau ajoutera simplement le nouveau produit de ce tableau, mais l'ancien produit restera dans le tableau.

products = [
{code: '123', name: 'product1'},
{code: '321', name: 'product2}'
]

<select formControlName="modelPDC" (click)="selectProduct()">
      <option *ngFor="let prod of this.products" 
      [value]="prod.code">{{ prod.name }}</option>
</select>

<tr>
        <td>{{ productSelected.name }}</td>
        <td>{{  productSelected.code  }}</td>
</tr>

//I will use *ngFor to populate the table.
//The productSelected will be the array filled with the data selected in 
//the list and others check boxes.

Je sais comment pour remplir le tableau, j'utiliserai la méthode .push mais je ne sais pas comment éviter le champ en double dans le tableau (array -> productSelected). Je pensais faire une recherche dans le tableau et savoir si le produit a été sélectionné juste pour le supprimer, ou quelque chose comme ça.

J'espère que je fais la guerre assez clairement .. Merci!

javascript typescript angular angular-reactive-forms

7 commentaires

Vous devez mettre les produits sélectionnés dans un tableau différent

Oui bien sûr. Mais, même cela, le nouveau tableau sera rempli à chaque fois que l'utilisateur change le produit de la liste ou coche et après décocher l'une des cases à cocher ...

@Sebastian Pourquoi voulez-vous un tableau si vous n'avez qu'un seul produit sélectionné avec productSelected ?!

parce que dans ce tableau, je tiendrai ce produit sélectionné plus les accessoires sélectionnés. De cette manière, je peux également remplir le tableau. avec * ngFor. et ajoutez un index pour chaque ligne.

@Sebastian Si vous n'avez sélectionné qu'un seul produit, vous créez une variable selectedProduct et une autre variable qui est un tableau: selectedAccessories

Bien, c'est une bonne approche mais j'ai dans mon cas trois listes et quatre cases à cocher.

Je ne comprends pas parfaitement votre question, mais jetez un œil à cet exemple: stackblitz.com/edit/angular-xq3mgv Si vous souhaitez supprimer des enregistrements existants, vous pouvez le faire en utilisant splice et indexOf : stackoverflow.com/questions/5767325 /…

3 Réponses :

1
votes

cochez la valeur de la case à cocher de votre produit si la valeur de la case à cocher est vraie et que le produit n'existe pas dans les produits sélectionnés, puis appuyez dessus si la coche est fausse et que le produit est présent dans la liste de produits sélectionnée, vous pouvez le supprimer à l'aide de splice

  setToArray(prod, check){
      if(!check && selectedProd.includes(prod)) {
         selectedProd.splice(selectedProd.indexOf(prod),1)
       }
      else if(check && !selectedProd.includes(prod)){
       selectedProd.push(prod);
    }
    }

5 commentaires

Oui, cela convient aux cases à cocher mais pas à la liste. Dans la liste, j'aurai beaucoup de produits et l'utilisateur peut changer d'avis pour sélectionner un autre produit dans la liste. Et de cette façon, je ne peux pas utiliser cette méthode.

Pouvez-vous décrire votre problème en détail. L'utilisateur ne peut sélectionner qu'un seul produit?

Oui, il utilisera une liste de produits et d'autres cases à cocher pour les accessoires. Je veux qu'un tableau soit rempli de manière dynamique chaque fois que l'utilisateur sélectionne un produit ou sélectionne / désélectionne un accessoire. Je pourrais créer un bouton pour peupler le tableau à la fin des sélections mais je veux être dynamiquement ..

// avec cette méthode, j'ajouterai également cet accessoire dans le tableau KB Accessoire R

continuons cette discussion dans le chat

0
votes

Essayez cet exemple

<mat-form-field>
  <mat-select placeholder="Favorite food" (selectionChange)="selectionPush($event)">
    <mat-option *ngFor="let food of getArray()" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>
<br/>
<mat-checkbox [checked]="true" (change)="remove(items)" *ngFor="let items of selectedItems">{{items}}</mat-checkbox>

Dans un fichier Html

**In Ts file**

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

export interface Food {
  value: string;
  viewValue: string;
}

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  foods: Food[] = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }
  ];
  selectedItems: any = [];

  getArray() {
    let tempArray = [];
    for (let i = 0; i < this.foods.length; i++) {
      if (this.selectedItems.indexOf(this.foods[i].value) == -1) {
        tempArray.push(this.foods[i]);
      }
    }
    return tempArray;
  }

  selectionPush(data) {
    if (this.selectedItems.indexOf(data.value) == -1) {
      this.selectedItems.push(data.value);
    }
  }
  remove(data) {
     let tempArray = [];
    for (let i = 0; i < this.selectedItems.length; i++) {
      if (this.selectedItems[i] != data) {
        tempArray.push(this.selectedItems[i]);
      }
    }
    this.selectedItems = tempArray;
  }
}

0 commentaires

0
votes

Je ne sais pas dans quelles conditions vous souhaitez supprimer une "ancienne" ligne de la table, mais si vous donnez à chaque ligne un identifiant (ou une classe unique à cette ligne) lors de sa création, alors chaque fois que ces conditions se produisent , vous pouvez faire quelque chose comme:

let yuckyRow = document.querySelector("#rowId");
document.querySelector("#myTable").removeChild(yuckyRow);

0 commentaires