web-dev-qa-db-fra.com

Comment supprimer une ligne particulière de la table de matériaux angular qui n'a pas de filtres?

mon samplepage.component.html

<table mat-table [dataSource]="myDataArray" >
      <!-- <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns" >
                      <th mat-header-cell *matHeaderCellDef > {{column}} </th>
                      <td mat-cell *matCellDef="let element" > {{element[column]}} </td>
                    </ng-container> -->


      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Id. </th>
        <td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>
      </ng-container>


      <ng-container matColumnDef="ticketnumb">
        <th mat-header-cell *matHeaderCellDef> Ticket Number </th>
        <td mat-cell *matCellDef="let element"> {{element.ticketnumb}} </td>
      </ng-container>


      <ng-container matColumnDef="actionsColumn">
          <th mat-header-cell *matHeaderCellDef> Action </th>
          <td mat-cell *matCellDef="let element;  let j = index;"> 
              <button mat-raised-button  color="warn" focusable="false" (click)="deleteTicket(j)">
                  <i class="fa fa-times mat-icon"></i> Remove
                </button>
          </td>
        </ng-container>





      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

mon samplepage.component.ts

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

@Component({
  selector: 'app-batchticketvalidation',
  templateUrl: './batchticketvalidation.component.html',
  styleUrls: ['./batchticketvalidation.component.css']
})
export class BatchticketvalidationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  displayedColumns = ['id', 'ticketnumb', 'actionsColumn'];
  dataSource: PeriodicElement[] = ELEMENT_DATA;
  private myDataArray: any;
  private tempTicketCount: number = 0;



  deleteTicket(rowid: number){

   if (rowid > -1) {
    this.myDataArray.splice(rowid, 1);
 }

  }

}


export interface PeriodicElement {
  id: number;
  ticketnumb: string;
  actionsColumn: any;
}


const ELEMENT_DATA: PeriodicElement[] = [
];

Je suis nouveau à angulaire. J'ai besoin d'aide pour supprimer la ligne perticulaire de la table et une fois la ligne supprimée, la table doit être actualisée ou afficher les données existantes. Je n'ai que des lignes statiques. Ceci est juste un html de maquette simple que je veux montrer au client.

Chaque ligne a un bouton Supprimer et en cliquant sur le bouton Supprimer, j'appelle deleteTicket (rowid).

Lorsque la méthode deleteTicket est déclenchée, la ligne est non supprimée de l'interface utilisateur, mais lorsque je console this.myDataArray, les données sont supprimées de l'objet.

J'ai essayé toutes les possibilités.

angulardelete-row
6
JustCode

Je suggère d'utiliser MatTableDataSource.

dataSource: MatTableDataSource = new MatTableDataSource<T>(ELEMENT_DATA);

deleteFunction(item){
    // find item and remove ist
    dataSource.data.splice(this.dataSource.data.indexOf(item.id), 1);
}
0
Max

Après avoir supprimé la ligne sélectionnée, vous devez à nouveau réaffecter matDataTable.

deleteTicket(rowid: number){
  // raw_data is the array of data that you getting from the db.
  this.raw_data.splice(rowid,0)
  this.dataSource = new MatTableDataSource(this.users);   
}
0
Ali Badr