18

我的 samplepage.component.ts

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

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

  constructor() { }

  displayedColumns = ['id', 'ticketnumb', 'actionsColumn'];
  dataSource: PeriodicElement[] = ELEMENT_DATA;
  private myDataArray: any;

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

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

const ELEMENT_DATA: PeriodicElement[] = [
];

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

我是角度的新手。我需要帮助从表中删除特定行，一旦删除该行，表应该得到刷新或者它应该显示现有数据。我只有静态行。这只是我想向客户展示的简单的样机 html。

每行都有删除按钮，单击删除按钮我调用 deleteTicket(rowid)。

当 deleteTicket 方法被触发时，该行不会从 Ui 中删除，但是当我控制台 this.myDataArray 时，数据会从对象中删除。

我尝试了所有的可能性。

4

5 回答 5

42

在splice()按项目索引之后，您应该更新数据源。

const index = this.dataSource.data.indexOf(item.id);
this.dataSource.data.splice(index, 1);
this.dataSource._updateChangeSubscription(); // <-- Refresh the datasource
于 2019-04-07T23:08:03.547 回答
3

删除所选行后，您必须再次重新分配 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);   
}
于 2019-02-18T10:20:59.047 回答
2

问题是不变性在游戏中：初始化后的 mat-table 只监听数据源引用

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

因此，数据源引用应在更改其内容后以某种方式更新，例如

  deleteTicket(rowid: number) {
    if (rowid > -1) {
      this.myDataArray.splice(rowid, 1);
      this.myDataArray = [...this.myDataArray]; // new ref!
    }
  }

或更简单

  deleteTicket(rowid: number) {
    this.myDataArray = this.myDataArray.filter((item, index) => index !== rowid);
  }
于 2021-06-09T00:56:47.747 回答
0

下面的代码对我有用

removeData(i){
 this.count.splice(i,1);
 this.dataSource = new MatTableDataSource(this.count);
}
于 2020-10-21T18:30:01.860 回答
-1

我建议使用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);
}
于 2019-02-18T10:20:14.920 回答