单击全选时，角度数据表消失，即使变量有数据也没有数据显示

问题描述

我正在尝试使用angular在数据表中显示我的api数据。我遵循了此https://therichpost.com/angular-9-datatables-with-custom-checkbox-selection/。最初没有数据，我的页面显示如下

在单击过滤器按钮时，我正在调用一个函数，该函数调用api并获取数据。尽管api响应有20条记录，但我的数据表在单页中显示了全部20条记录，而不是每页显示10条记录。同样在表末尾，即使表中有数据，我也看不到任何可用数据。

当我单击顶部的“全选”复选框时，数据表将显示与第一张图片相同的无可用数据。

我的html

<table width="100%" class="table table-striped table-bordered table-sm row-border hover" datatable 
 [dtOptions]="dtOptions" style="width:100%">
 <thead>
 <tr>
   <th><input type="checkBox" name="websitecheck" (click) = "checkuncheckall()"></th>
   <th>Pathid</th>
   <th>Start location</th>
   <th>End location</th>
   <th>Trip length</th>
   <th>Routerisk factor</th>
</tr>
</thead>
<tbody>
  <tr *ngFor="let group of grid_data">
  <td><input type="checkBox" name="pathid" [checked]="isChecked" value="{{group.route_risk_factor}}"></td>
 <td>{{group.path_id}}</td>
 <td>{{group.start_location}}</td>
 <td>{{group.end_location}}</td>
 <td>{{group.trip_length}}</td>
 <td>{{group.route_risk_factor}}</td>
</tr>
</tbody>
</table>
</div>

我的.ts代码

grid_data: any;
dtOptions: DataTables.Settings = {};


isChecked = false;
checkuncheckall() {
    if(this.isChecked == true)
    {
        this.isChecked = false;
    }
    else
    {
        this.isChecked = true;
    }
}

ngOnInit(): void {
    this.grid_data = [];
    this.dtOptions = {
        pagingType: 'full_numbers',pageLength: 10,processing: true,autoWidth: false
      };
    }

这是单击过滤器按钮时调用的功能

convert(str) {
    var date = new Date(str),mnth = ("0" + (date.getMonth() + 1)).slice(-2),day = ("0" + date.getDate()).slice(-2);
    return [date.getFullYear(),mnth,day].join("-");
  }

  getTrips() {
    var user_from_date = this.fromDate
    var startdate = this.convert(user_from_date);
    var to_user_date = this.toDate;
    var enddate = this.convert(to_user_date);
    var final_start_date = new Date(startdate).getTime() / 1000
    var final_end_date = new Date(enddate).getTime() / 1000
    var email = this.Selectedemail['email_id'];
    var headers = this.accountService.trips_apikey_encrypt(environment.web_apikey)
    headers['x-email'] = this.Selectedemail['id'];
    headers['x-from'] = final_start_date;
    headers['x-to'] = final_end_date;
    return this.http.get<any>(environment.apiUrl+'/User/getTrips',{ headers })
      .subscribe(data => {
        if (data == undefined) {
          this.data = [];
          this.errorMsg = data['Error'];
        } else {
          this.grid_data = data.slice(1);
        }

      });

  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）