为什么我的删除功能在 table 上不起作用

Question

我不知道为什么删除功能在我的垫子上不起作用table并且不会删除所需的行。如何删除此垫子中的一行 table 我应该对代码进行哪些更改？我无法进一步解释，非常感谢您的帮助我的 ts 文件是：

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);
    }
}

我的 html 文件是：

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

非常感谢您的帮助

Answer 1

您需要在 MatTableDataSource 实例上设置新数据：

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;
}

这将导致 MatTableDataSource 内部使用的 BehaviourSubject 发出新数据并更新 table。

为什么我的删除功能在 table 上不起作用

why my delete function not work on my table

angular-material

angular