2
votes

Supprimer le matériau angulaire 2 de la ligne entière?

JSON

<div class="example-container mat-elevation-z8">

  <mat-table #table [dataSource]="dataSource">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef>
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-icon-button color="#b71c1c">
                    <mat-icon aria-label="Delete">delete</mat-icon>
                  </button>
      </mat-cell>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

     <!-- Weight Column -->
    <ng-container matColumnDef="value">
      <mat-header-cell *matHeaderCellDef> value </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"
             (click)="selection.toggle(row)">
    </mat-row>
  </mat-table>


</div>

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  removeSelectedRows() {
     this.selection.selected.forEach(item => {
      let index: number = this.data.findIndex(d => d === item);
      console.log(this.data.findIndex(d => d === item));
      this.dataSource.data.splice(index,1);

      this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
      setTimeout(() => {
        this.dataSource.paginator = this.paginator;
      });
    });
    this.selection = new SelectionModel<Element>(true, []);
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));
  }
}

HTML

[
  { position: 1, name: 'test', value: 1.0079, symbol: 'HHH' },
  { position: 2, name: 'test2', value: 4.0026, symbol: 'BBB' },
  { position: 3, name: 'test3', value: 6.941, symbol: 'BB' },
  { position: 4, name: 'test4', value: 9.0122, symbol: 'CC' },
]

je veux supprimer toute la ligne en un seul clic Explication -> quand je clique sur le bouton de suppression, la ligne entière devrait être supprimée mais ici je fais un appel API par exemple lorsque je supprime une ligne, cela enverra un nom à l'API!

ici c'est mon stackbliz démo - https: // stackblitz.com/edit/delete-rows-mat-table-f5f7tr?file=app%2Ftable-selection-example.ts

typescript angular angular-material

0 commentaires

3 Réponses :

0
votes

ajouter une fonction pour supprimer la ligne:

<button (click)="deleteRow(row)" mat-icon-button color="#b71c1c">
      <mat-icon aria-label="Delete">delete</mat-icon>
</button>

et dans le HTML, appeler cette fonction lorsque le bouton de suppression est cliqué

  deleteRow(row) {
    this.dataSource.data.splice(row.position-1, 1);
    this.dataSource =  new MatTableDataSource<Element>(this.dataSource.data);
  }

p >

1 commentaires

@PrashantPimpale pourriez-vous s'il vous plaît regarder mon nouveau Qn désolé mais vous me donnez toujours des réponses simples!

1
votes

Vous pouvez essayer ceci:

HTML:

removeSelectedRow(row) {
    //const index = this.data.findIndex(obj => obj === row);
    const index = this.data.findIndex(obj => obj.codeData == row.codeData);
    this.data.splice(index, 1);
    this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
}

TS:

<!-- Checkbox Column -->
<ng-container matColumnDef="actions">
  <mat-header-cell *matHeaderCellDef> </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-icon-button color="#b71c1c" (click)="removeSelectedRow(row)">
      <mat-icon aria-label="Delete">delete</mat-icon>
    </button>
  </mat-cell>
</ng-container>

StackBlitz ICI strong>

Résultat:

3 commentaires

La méthode findIndex () renvoie l'index du premier élément du tableau qui satisfait la fonction de test fournie. Et this.data fait référence à vos données => data = Object.assign (ELEMENT_DATA);

chaque ligne contient une valeur uniq et cette valeur uniq est ma valeur this.codeData, je veux donc supprimer cette ligne dans la référence de la valeur codeData, comment puis-je transmettre cette valeur ici

Dans ce cas, lors de la suppression, vous obtenez le codeData de l'objet: const index = this.data.findIndex (obj => obj.codeData === row.codeData); J'ai ajouté un codeData à vos données : {codeData: 'ABC', position: 1, nom: 'test', valeur: 1.0079, symbole: 'HHH'}, ... Vous pouvez accéder au StackBlitz ICI , I l'a changé.

0
votes

Il est toujours préférable de vérifier index! = -1

removeSelectedRows(row) {
    let index = ELEMENT_DATA.findIndex(x => x.position == row.position);

    if (index != -1) {
      ELEMENT_DATA.splice(index, 1)
    }
    this.dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
}

5 commentaires

en fait cette icône de suppression, il y avait une case à cocher et lorsque je clique sur une case à cocher particulière, elle obtient la valeur de la colonne CODE et sur la base de la valeur de la colonne de code, je supprime la ligne entière! mais pour le moment, je n'ai pas de case à cocher, donc quand je veux supprimer la ligne et cliquer sur l'icône de suppression, la ligne de valeur de code passe à l'API comment?

regardez ici stackblitz.com/edit/angular -gbf9kz-ex9qcb? file = app /…

Voulez-vous supprimer une ligne en cochant la case?

Terminé! mais ajoutez si condition!

Pimple pourriez-vous regarder mon nouveau Qn?