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

Question

不知道为什么删除功能不能正常使用第一次删除该行是正确的，但是第二次要删除一条记录时，遇到如下错误：

localhost:4200 说：this.dataArray.filter 不是函数

非常感谢你的帮助

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

  this.dataSource.data = this.dataArray;

  this.subs.add(this.financeService.deleteUsers(row_obj.id)
  .subscribe((res) => {
    this.dataArray = res;

  },
  ));

    }

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

我的service.ts是

import { Injectable } from '@angular/core';
import { Observable,throwError } from 'rxjs';
import { HttpClient,HttpHeaders }    from '@angular/common/http'
import { FormBuilder } from '@angular/forms';
import { retry, catchError } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ApiServiceService {
  constructor(private http: HttpClient ) { }
 getUsers(): Observable<Element> {
  const URL = 'http://192.168.1.110:8282/api/Person_api/ ';
  return this.http.get<Element>(URL).pipe(
    retry(0),
   // catchError(this.handleError)
  );
 }


deleteUsers(id: number): Observable<Element> {
  const URL = 'http://192.168.1.110:8282/api/DeletePerson/' + id.toString();
  return this.http.get<Element>(URL);
 }
}

Answer 1

似乎 ApiService::deleteUsers() returns 不是数组的东西（我猜是一些 object）

在这里你用这个 object 替换数组所以当它第二次到达运行时 dataArray 不包含数组

 this.subs.add(this.financeService.deleteUsers(row_obj.id)
  .subscribe((res) => {
    this.dataArray = res;
  },
  ));

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

why my delete function not work on my table for second time

angular-material

angular