Hello,
ive a little problem. I would like to create my tabs dynamic with a JSON string from the web. Adding works fine (except the first tab).
If i dont add a first tab i get a white screen of dead.
Now i have the problem that the view seems to update and the tabs are loaded but clicking the dynamic created tabs doesnt. it just doesnt switch the tab.
console.log(this.tabs) show me proper results with the components. It looks like that the tabs logic is rendered and only the view is updated? Maybe i forgot something.
Thanks so far.
pages = [
{ name: "news", component: HomePage, icon: "hearth" },
{ name: "facebook", component: FacebookPage, icon: "hearth" },
{ name: "events", component: EventsPage, icon: "hearth" },
{ name: "gallery", component: GalleryPage, icon: "hearth" },
{ name: "coupons", component: CouponsPage, icon: "hearth" },
{ name: "video", component: VideoPage, icon: "hearth" },
{ name: "map", component: LocationMapsPage, icon: "hearth" },
];
tabs: Array<{ title: string, component: Type, icon: string }>;
constructor(private platform: Platform, public sqlService: SqlService, public nav: NavController) {
this.platform.ready().then(() => {
this.tabs = new Array();
this.tabs.push({ title: "news", component: HomePage, icon: "hearth" });
this.tabs.push({ title: "news", component: HomePage, icon: "hearth" });
this.sqlService.query("SELECT * from settings where setting_name LIKE 'tab%'").then(
(result) => {
console.log("results length =" + result.res.rows.length);
for (var i = 0; i < result.res.rows.length; i++) {
console.log(JSON.stringify(result.res.rows.item(i)));
var matchResult = result.res.rows.item(i).setting_name.match(/tab([0-9])/);
if (matchResult) {
console.log("result matched", matchResult);
console.log("title=" + JSON.parse(result.res.rows.item(i).setting_value).title);
var tabItem = JSON.parse(result.res.rows.item(i).setting_value);
this.tabs.push({ title: tabItem.title, component: this.pages.filter(function (site) { return site.name == tabItem.component; })[0].component, icon: tabItem.icon });
}
}
console.log(this.tabs);
return result;
},
(error) => {
console.error(error);
return error;
}
)
});
}