在服务器端分页中单击下一页时未选中复选框
在服务器端分页中单击下一页时未选中复选框
提问于 2018-04-20 18:25:12
嗨，我的复选框有问题，当我在服务器端分页中点击下一页并返回时，复选框未被选中。
我必须将对象扩展到选中的字段，我该怎么做？
现在对象是从服务器获取的(http.get)
如果我已经选中了Items对象中的字段，我可以在新方法中使用它，当我返回站点时，谁可以自动选中复选框。
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_{{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
Stack Overflow用户
发布于 2018-04-20 19:30:07
好吧，我看到了以下选项：
这是来自服务器的对象：
{
"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}
]
}您已经知道Item()-class。在“选中”字段的情况下在本地扩展模型。
export class Item {
constructor(
public id: number,
public name: string,
public type: string,
public version: string,
public checked: boolean
){}
}以这种方式声明您的项目列表：
private checkItem: Array<Item> = [];扩展您的分页方法：
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;
});
}然后，您可以将checked-指令绑定到该字段
<input class="form-check" type="checkbox"
[checked]="item.checked" id="checkbox_category_{{i}}"
(change)="getItemFromCheckbox(item, $event)" mdbDeepDirective>这对你来说应该是可行的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49939511
复制相关文章
相似问题
腾讯云开发者
