我正在尝试使用自定义服务器数据源实现ng2-smart-table。除了寻呼机,它可以工作。即使我在设置中设置了所有属性,寻呼机也不会显示。你们知道我错过了什么吗?
mySettings = {
hideSubHeader: false,
filter: true,
sort: true,
hideHeader: false,
actions: {
edit: false,
add: false,
delete: false,
position: false,
},
pager: {
display: true,
perPage: 10,
},
columns: {},
};
settings: any = {};
// private fieldsToSearch: Map<string, string> = new Map<string, string>();
constructor( private activatedRoute: ActivatedRoute,
private statisticService: StatisticService,
private datePipe: DatePipe,
private httpClient: HttpClient ) {
}
ngOnInit() {
// this.blockUI.start();
this.macroCatId = RouteUtils.extractParamFromAncestor( this.activatedRoute.pathFromRoot, 'macroCatId' );
this.executionId = RouteUtils.extractParamFromAncestor( this.activatedRoute.pathFromRoot, 'executionId' );
this.bankId = RouteUtils.extractParamFromAncestor( this.activatedRoute.pathFromRoot, 'bankId' );
this.statisticId = RouteUtils.extractParamFromAncestor( this.activatedRoute.pathFromRoot, 'statisticId' );
this.source = new BrizoServerDataSource( this.executionId,
this.macroCatId,
this.bankId,
this.statisticId,
this.httpClient,
this.datePipe );
this.source.generateColumnsFromProduct()
.finally( () => {
this.settings = Object.assign( {}, this.mySettings );
// this.source.setPaging( 0, 3 );
console.log( this.settings )
} )
.subscribe( ( settingsReceived ) => {
this.mySettings.columns = settingsReceived
} );
}
这里我的服务器数据源我正在使用Http客户端而不是普通的http来提高性能
export class BrizoServerDataSource extends LocalDataSource {
params: any = {};
lastRequestCount: number = 0;
constructor( private executionId,
private macroCatId,
private bankId,
private statisticId,
protected httpClient: HttpClient,
protected datePipe: DatePipe ) {
super();
}
count(): number {
return this.lastRequestCount;
}
callTheProductsFromBackEnd( params: any ): Observable<StatisticResponse> {
return this.httpClient.get<StatisticResponse>(
environment.brizoUrl
.concat( '/' )
.concat( this.executionId )
.concat( '/products/' )
.concat( this.macroCatId )
.concat( '/' )
.concat( this.statisticId )
.concat( '/products' ),
{
headers: {'XXX-organization': this.bankId},
params: params,
} )
}
generateColumnsFromProduct(): Observable<any> {
return this.callTheProductsFromBackEnd( {} )
.map( res => {
// console.log( res )
const columns: any = {};
if ( res.detailObject.products && res.detailObject.products.length > 0 ) {
res.detailObject.products[0].fields.forEach( field => {
const column = {};
column['title'] = field.name;
column['type'] = 'custom';
column['renderComponent'] = CellStatisticTableComponent;
columns[field.name] = column;
} );
}
return columns;
} );
}
getElements(): Promise<any> {
if ( this.sortConf ) {
this.sortConf.forEach( ( fieldConf ) => {
this.params['sortField'] = fieldConf.field;
this.params['sortOrder'] = fieldConf.direction.toUpperCase();
} );
}
if ( this.pagingConf && this.pagingConf['page'] && this.pagingConf['perPage'] ) {
// console.log( this.pagingConf );
this.params['page'] = this.pagingConf['page'] - 1;
this.params['pageSize'] = this.pagingConf['perPage'];
// url += `_page=${this.pagingConf['page']}&_limit=${this.pagingConf['perPage']}&`;
}
if ( this.filterConf.filters ) {
// console.log( this.filterConf )
this.filterConf.filters.forEach( ( fieldConf ) => {
const sanitizedValue = !isNullOrUndefined( fieldConf['search'] ) ?
fieldConf['search'].replace( /^\s+|\s+$/g, '' ) : '';
if ( !''.match( sanitizedValue ) ) {
this.params['F_'.concat( fieldConf.field )] = fieldConf['search'];
} else {
delete this.params['F_'.concat( fieldConf.field )];
}
} );
}
return this.callTheProductsFromBackEnd( this.params )
.map( ( products ) => {
const dataSetToBeDisplayed = [];
products.detailObject.products.forEach( ( product ) => {
const tempSourceField = {};
product.fields.forEach( field => {
field.value = field.type === 'date' ? this.datePipe.transform( field.value, 'dd MMM yyyy' ) : field.value;
tempSourceField['fieldType'] = field.type;
tempSourceField[field.name] = field.value;
} );
dataSetToBeDisplayed.push( tempSourceField );
} );
return dataSetToBeDisplayed;
} ).toPromise();
}
}