Как удалить конкретную строку из таблицы угловых материалов, в которой нет фильтров?

Question

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

my 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[] = [
];

Я новичок в угловой.Мне нужна помощь в удалении перикулярной строки из таблицы, и после удаления строки таблица должна обновиться или отобразить существующие данные.У меня только статические ряды.Это просто обычный макет HTML, который я хочу показать клиенту.

В каждой строке есть кнопка удаления, и при нажатии кнопки удаления я вызываю deleteTicket (rowid).

Когда метод deleteTicketзапускается, строка не удаляется из пользовательского интерфейса, но когда я утешаю this.myDataArray, данные удаляются из объекта.

Я перепробовал все возможности.

Пожалуйста, помогите

Answer 1

После удаления выбранной строки вам необходимо снова переназначить 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);   
}

Answer 2

после splice () по индексу элемента, вы должны обновить источник данных.

      const index = this.dataSource.data.indexOf(item.id);
      this.dataSource.data.splice(index, 1);
      **this.dataSource._updateChangeSubscription();**

Answer 3

Я бы предложил использовать 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);
}