checkbox unchecked when click next page in server-side pagination

Hi i have problem with my checkbox, when i clicked next page in server-side pagination and i go back the checkbox is unchecked.

I must extends the object to the checked field, how can i do this ?

now the object is get from server (http.get)

if i have checked field in Items objects i can used this in new method who can check checkbox automaticly when i go back site.

httpService:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Items } from './items';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

@Injectable()
export class HttpService {

  constructor(private http: HttpClient) {}

  private url: string = 'url-link';


  getItems(page: number, pageSize: number): Observable<Items> {
    const start = (page - 1) * pageSize;
  //  console.log(`${this.url}/${start}/${pageSize}`);
    return this.http.get<Items>(`${this.url}/${start}/${pageSize}`);
  }
}

app.component.ts :

import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';
import { Items } from './items';
import { List } from './list';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  private items = new Items();
  private checkItem: List[] = [];
  private pageSize: number = 10;
  private p: number = 1;
  //  private showFilter: boolean;

  constructor(private httpService: HttpService) { }

  ngOnInit(): void {
    this.getItems(1, this.pageSize);
  }

  private getItems(event: number, pageSize: number) {
    pageSize = this.pageSize;
    this.p = event;
    this.httpService.getItems(event, pageSize).subscribe(items => this.items = items);
  }

  /*   private tableFilter() {
      this.showFilter = true;
    }

    private hideTableFilter() {
      this.showFilter = false;
    } */

  private getItemFromCheckbox(item: List, event) {
    const index = this.checkItem.findIndex(newItem => newItem.id === item.id);
    if(event.target.checked) {
      if(index === -1) {
        this.checkItem.push(item);
      }
    }
    else {
      if(index !== -1) {
        this.checkItem.splice(index, 1);
      }
    }
    console.log(this.checkItem);
  }

/*   testowo(item: List) {
    this.testsss.push(item);
    console.log(this.testsss);
    const index = this.testsss.findIndex(newItem => newItem.id === item.id);
    console.log(index);
  } */

  private sortItems(sortBy: string) {
    this.items.list.sort((a: List, b: List) => {
      if (sortBy === 'id-up') {
        if (a.id < b.id) {
          return -1;
        }
        else if (a.id > b.id) {
          return 1;
        }
      }
      else if (sortBy === 'id-down') {
        if (a.id < b.id) {
          return 1;
        }
        else if (a.id > b.id) {
          return -1;
        }
      }
      else if (sortBy === 'name-up') {
        if (a.name < b.name) {
          return -1;
        }
        else if (a.name > b.name) {
          return 1;
        }
      }
      else if (sortBy === 'name-down') {
        if (a.name < b.name) {
          return 1;
        }
        else if (a.name > b.name) {
          return -1;
        }
      }
      else if (sortBy === 'name-up') {
        if (a.name < b.name) {
          return -1;
        }
        else if (a.name > b.name) {
          return 1;
        }
      }
      else if (sortBy === 'name-down') {
        if (a.name < b.name) {
          return 1;
        }
        else if (a.name > b.name) {
          return -1;
        }
      }
      else if (sortBy === 'type-up') {
        if (a.type < b.type) {
          return -1;
        }
        else if (a.type > b.type) {
          return 1;
        }
      }
      else if (sortBy === 'type-down') {
        if (a.type < b.type) {
          return 1;
        }
        else if (a.type > b.type) {
          return -1;
        }
      }
      else if (sortBy === 'version-up') {
        if (a.version < b.version) {
          return -1;
        }
        else if (a.version > b.version) {
          return 1;
        }
      }
      else if (sortBy === 'version-down') {
        if (a.version < b.version) {
          return 1;
        }
        else if (a.version > b.version) {
          return -1;
        }
      }
    });
  }
}

app.component.html :

    <tr *ngFor="let item of items.list | paginate : { id: 'server', itemsPerPage: pageSize, currentPage: p, totalItems: items.count }; let i = index">
        <th><input class="form-check" type="checkbox" id="checkbox_category_" (change)="getItemFromCheckbox(item, $event)" mdbDeepDirective></th>
        <th scope="row"></th>
        <td></td>
        <td></td>
        <td></td>
    </tr>