单击服务器端分页中的下一页时取消选中复选框

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)

现在对象是从服务器获取的（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.

如果我在Items对象中检查了字段，我可以在新方法中使用它，当我回到网站时可以自动检查复选框。

httpService:

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 :

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 :

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_{{i}}" (change)="getItemFromCheckbox(item, $event)" mdbDeepDirective></th>
        <th scope="row">{{item.id}}</th>
        <td>{{item.name}}</td>
        <td>{{item.type}}</td>
        <td>{{item.version}}</td>
    </tr>

1 个解决方案

#1

Well, I see the following option:

好吧，我看到以下选项：

This is your object from the server:

这是来自服务器的对象：

{ 
   "count":124, 
   "list": 
          [ 
            {"type":"test","id":1,"name":"ddfgd","version":1}, 
            {"type":"test","id":2,"name":"dfgd","version":1},
            {"type":"test","id":4,"name":"dfgd","version":1} 
          ] 
}

You already know your Item()-class. Extend the model locally with the field 'checked'.

你已经知道了你的Item（） - 类。使用“已检查”字段在本地扩展模型。

export class Item {
  constructor(
     public id: number,
     public name: string,
     public type: string,
     public version: string,
     public checked: boolean
  ){}
}

Declare your item list this way:

以这种方式声明您的项目列表：

private checkItem: Array<Item> = [];

Extend your Paging-method:

扩展您的Paging方法：

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

    {
       // iterate over the list of items and search in your
       // list of checked items for a match.
       // if you found one, transfer the value.
       items.list.forEach(el => {
         for(let chItem of checkItem){
           if(el.id === chItem.id){
              el.checked = true;
              break;
         }

         if(!el.checked) {
             el.checked = false;
         }

       });

       // afterwards exchange the lists.
       this.items = items;

     });
}

Then you can bind your checked-directive to this field

然后，您可以将checked-directive绑定到此字段

<input class="form-check" type="checkbox" 
[checked]="item.checked" id="checkbox_category_{{i}}" 
 (change)="getItemFromCheckbox(item, $event)" mdbDeepDirective>

This should work for you.

这应该适合你。