why my delete function not work on my table

Issue

I don’t know why delete function not work on my mat table and The desired line will not be deleted. how can delete a row in this mat table and What changes should I make to the code?
I can not explain further, thank you so much for you help
my ts file is:

export class PersonsComponent implements OnInit {
  private subs = new Subscription();
  private dataArray: any;
  dataSource = new MatTableDataSource<Element>()

  constructor(private financeService: ApiServiceService,public dialog: MatDialog) { }
  displayedColumns: string[] = ['position', 'name', 'username', 'email','address', 'action'];

 // none value
 filterValues = {
  name: ''
};

// form group
filterForm = new FormGroup({
  name: new FormControl()
});

get name() {
  return this.filterForm.get('name');
}
openDialog(action: any,obj:  any) {
  obj.action = action;
  const dialogRef = this.dialog.open(DialogBoxComponent, {
    width: '350px',
    data:obj
  });

  dialogRef.afterClosed().subscribe((result: { event: string; data: any; }) => {
     if(result.event == 'Delete'){
      this.deleteRowData(result.data);
    }
  });
}

deleteRowData(row_obj: { id: number; }){
    this.dataArray = this.dataArray.filter((value : any,key: any)=>{
    return value.id != row_obj.id;
  });
}
  @ViewChild(MatSort, { static: false })
  sort!: MatSort;
  @ViewChild(MatPaginator) paginator !: MatPaginator;


  ngOnInit() {
      this.subs.add(this.financeService.getRandomUsers()
        .subscribe((res) => {
          this.dataArray = res;
          this.dataSource = new MatTableDataSource<Element>(this.dataArray)
          this.formSubscribe();
          this.getFormsValue();
        },
        ));
    }

    // form subscribe
    formSubscribe() {
      if (this.name !=null){
       this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      this.name.valueChanges.subscribe(nameValue => {
        this.filterValues['name'] = nameValue;
        this.dataSource.filter = JSON.stringify(this.filterValues);

      });
    }
    }
    // create filter
    getFormsValue() {
      this.dataSource.filterPredicate = (data: any, filter: string): boolean => {
        let searchString = JSON.parse(filter);

        const resultValue =
          data.name.toString().trim().toLowerCase()
            .indexOf(searchString.name.toLowerCase()) !== -1;
        return resultValue;
      };
      this.dataSource.filter = JSON.stringify(this.filterValues);
    }
}

and my html file is:

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

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

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

  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef="let element" class="action-link">

      <a (click)="openDialog('Delete',element)">Delete</a>
    </td>
  </ng-container>

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

thank you so much for your help

Solution

You need to set the new data on your MatTableDataSource instance:

deleteRowData(row_obj: { id: number }) {
    this.dataArray = this.dataArray.filter((value: any, key: any) => {
      return value.id != row_obj.id;
    });
    this.dataSource.data = this.dataArray;
}

That will cause the BehaviourSubject internally used by MatTableDataSource to emit the new data and the table to get updated.

Answered By – lbsn

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.