When declaring a variable with log = [{id: "Logs List Details1"},{id: "Logs List Details2"},....etc}] dynamically, issues arise when pushing dynamic data to it. If the data is static and pushed incrementally, it exceeds the page limit. However, if only one static value is passed for the log object and data is appended to it, only one value is displayed without pagination. This means that dynamic data is not being properly appended Here, the page limit per page is set at 3.
********here is my modified HTML code************
<div class=" list-servers">
<div class="col-md-12">
<span>Default Log</span>
<span class="flt-right"><a href="#"><img src="images/plus.png">==</a>
</span>
</div>
</div>
<div class="container">
<div class="row" id="row-main">
<div class="row">
</div>
<div class="col-md-9" id="content">
<div class="content-area">
<ng2-smart-table *ngIf="log" [settings]="settings" [source]="log"
[defaultSettings]="defaultSettings" >
</ng2-smart-table>
</div>
</div>
</div>
</div>
**************And here is my revamped .ts file***************
***********I am utilizing Ng2-smart-table to present my log details.***********
import { Component, OnInit, OnChanges } from '@angular/core';
import any = jasmine.any;
import {GetDefaultLogService} from '../get-default-log.service';
import {DefaultLogItem} from '../default-log-item';
import { OauthTokenService } from '../oauth-token.service';
@Component({
templateUrl: './get-default-log.component.html',
styleUrls: ['./get-default-log.component.css']
})
export class GetDefaultLogComponent implements OnInit{
defaultLogItemValue: string;
servername = sessionStorage.getItem("servername");
logType = sessionStorage.getItem("logType");
hidediv: boolean = true;
settings = {
columns: {
id: {
title: 'Logs List Details'
}
}
};
protected defaultSettings: Object = {
mode: 'inline', // inline|external|click-to-edit
hideHeader: false,
hideSubHeader: true,
attr: {
id: '',
},
noDataMessage: 'No data found',
columns: {},
pager: {
display: true,
perPage: 10
}
};
defaultLogItems: DefaultLogItem[];
// log:Array<any>=[{id: ""}];
//log:any=[];
//I want json in this format dynamically
log=[
{id: "Logs List Details1"},
{id: "Logs List Details2"},
{id: "Logs List Details3"},
{id: "Logs List Details4"},
{id: "Logs List Details5"}
];
constructor(private service: GetDefaultLogService, private oauthTokenService:
OauthTokenService) {
this.service.getLogItemList(this.oauthTokenService.getHeaders(),
sessionStorage.getItem("server"), 12345,
sessionStorage.getItem("startDate"), sessionStorage.getItem("endDate"),
sessionStorage.getItem("logType")).subscribe(lst =>{
this.defaultLogItems = lst;
for(var v in lst[0].logList) {
this.log.push({id: lst[0].logList[v]});
}
});
}
ngOnInit() {
console.log("this.defaultLogItems"+this.log);
}
}
********Please provide suggestions on how to achieve pagination while avoiding static data. The desired page limit is 10.
How can I declare the log variable as an array of objects with IDs like "Logs List Details1", "Logs List Details2", etc., dynamically? Static input results in exceeding the page limit when dynamic data is added. Conversely, passing only one static value and appending data leads to single value display without pagination. Dynamic data fails to append directly in this scenario.