コンポーネントを使おうとしています <ng2-smart-table>
。実際に実行しましたが、ユーザーがページまたは列をクリックして並べ替えた後にデータを更新する必要があります。これらのイベントをキャプチャしてデータを更新する方法はありますか?
table.component.html
<ng2-smart-table
[settings]="settings"
[source]="characters">
</ng2-smart-table>
table.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class TableService {
constructor(private http: HttpClient) { }
url = 'http://localhost:4000';
getCharacters() {
return this
.http
.get(`${this.url}/characters`);
}
}
table.interface.ts
export interface Table {
ticket: String;
title: String;
state: String;
owner: String;
age: String;
priority: String;
}
table.component.ts
import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Table } from './table.interface';
import { Observable } from 'rxjs';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
characters: Table[];
settings = {
columns: {
ticket: {
title: 'Ticket',
filter: false
},
title: {
title: 'Title',
filter: false
},
state: {
title: 'State',
filter: false
},
owner:{
title: 'Owner',
filter: false
},
age:{
title: 'Age',
filter: false
},
priority:{
title: 'Priority',
filter: false
}
},
actions:{
columnTitle: '',
add: false,
edit: false,
delete: false
}
};
constructor(private tservice: TableService) { }
ngOnInit() {
this
.tservice
.getCharacters()
.subscribe((data: Table[]) => {
this.characters = data;
});
}
}
parent.component.ts
import { Component, OnInit } from '@angular/core';
import { TableComponent } from '../../utils/table/table.component';
@Component({
selector: 'app-ticket-item-list',
templateUrl: './ticket-item-list.component.html',
styleUrls: ['./ticket-item-list.component.scss']
})
export class TicketItemListComponent implements OnInit {
pagination = {
TotalItems: 100,
CurrentPage: 1,
PageSize: 10,
TotalPageLinkButtons: 5,
RowsPerPageOptions: [10, 20, 30, 50, 100]
};
/* Paging Component metod */
myChanges(event) {
this.pagination.CurrentPage = event.currentPage;
this.pagination.TotalItems = event.totalItems;
this.pagination.PageSize = event.pageSize;
this.pagination.TotalPageLinkButtons = event.totalPageLinkButtons;
}
constructor() { }
ngOnInit() {
}
}
parent.component.html
<app-table></app-table>
Ng2-smart-table LocalDataSourceを使用して、フィルターを設定したり、フィルターを設定したり、フィルターを追加したりできます。したがって、サービスの結果をLocalDataSourceオブジェクトに格納できます。 initでは次のようになります。this.characters= new LocalDataSource(tableService.getCharacters());
参照用のソースは次のとおりです。 https://github.com/akveo/ng2-smart-table/blob/master/projects/ng2-smart-table/src/lib/lib/data-source/local /local.data-source.ts
ページネーションにはsetPaging
を使用します
this.YourlocalDataSource.setPaging(1, 10, true);
1
はページ、10
はページあたりの行数、true
はページを強制的にレンダリングします