angular ui router - Nativescript Listview showing nothing -
i have minimalist nativescript hello world application. has 2 screens, 'login' , 'list'.
here flow:
- user presses login button in first screen.
- second screen shown, suppose show list of names; shows nothing.
- if type single character in text field, shows list.
i have been scouring on stack overflow , github, seems problem others facing bit complicated, "list not getting updated after http call" etc.
so seems making obvious mistake here, because basic scenario should 'just work'. small mistake alludes me.
here login file:
/*login.component.ts*/ import { component } "@angular/core"; import firebase = require("nativescript-plugin-firebase"); import * rx "rxjs"; import { myfireloginservice } '../../mobile-fire/fire-login.service' import { router } "@angular/router"; import { observable } "rxjs/observable"; @component({ selector: "login", templateurl: './pages/login/login.component.html', styleurls: ['./pages/login/login.component.css'] }) export class logincomponent { email: string = 'user1@site.com'; password: string = 'password'; user: observable<any>; constructor(private fl: myfireloginservice, private router: router) { this.email = 'user1@site.com'; this.password = 'password'; this.user = fl.authstate; this.watchuser(); } watchuser(): void { this.user.subscribe((usr) => { if (usr.uid) { this.router.navigate(["/list"]); } }) } login(): void { this.fl.loginwithemail(this.email, this.password) } }
and list file:
import { component } "@angular/core"; import firebase = require("nativescript-plugin-firebase"); import * rx "rxjs"; import { myfireloginservice } '../../mobile-fire/fire-login.service' import { router } "@angular/router"; import { observable } "rxjs/observable"; @component({ selector: "list", templateurl: './pages/list/list.component.html', styleurls: ['./pages/list/list.component.css'] }) export class listcomponent { items: any[] = []; user: observable<any>; constructor(private fl: myfireloginservice, private router: router) { this.user = fl.authstate; this.watchuser(); this.items = [{ name: 'aks1' }, { name: 'aks2' }, { name: 'aks3' }] } watchuser(): void { this.user.subscribe((usr) => { if (!usr.uid) { this.router.navigate(["/"]); } }) } private textchanged(e: any): void { console.log(e.value); // console.dir(this.items); } logout() { this.fl.logout() } }
list.component.html
<actionbar title="list" class="action-bar"></actionbar> <stacklayout> <button class="submit-button" text="logout" (tap)="logout()"></button> <textfield hint="empty field testing.." (textchange)="textchanged($event)"></textfield> <label *ngfor="let item of items" [text]="item.name"></label> <!-- <gridlayout> <listview id="list-of-items" [items]="items" class="small-spacing"> <ng-template let-item="item"> <label [text]="item.name" class="medium-spacing"></label> </ng-template> </listview> </gridlayout> --> </stacklayout>
login.component.html
<actionbar title="login" class="action-bar"></actionbar> <stacklayout> <button class="submit-button" text="sign in" (tap)="login()"></button> <label text="hello world"></label> </stacklayout>
edit: here log life-cycle events of 2 components:
js: login:ngdocheck called js: login:ngaftercontentchecked called js: login:ngafterviewchecked called js: auth state changed. js: <==== me typing 'a' in textbox of list component js: login:ngdocheck called js: login:ngaftercontentchecked called js: login:ngafterviewchecked called js: list:ngoninit called js: list:ngdocheck called js: list:ngaftercontentinit called js: list:ngaftercontentchecked called js: list:ngafterviewchecked called
what find strange list component's init not called until type 'a' in textbox inside list component. also, login component's life-cycle events called after gone out of view.
update1: followed tutorial on nativescript.org. code there seems working fine. suspect, there wrong inclusion of firebase plugin. update when know more.
update2: stubbed parts of firebase api using, worked fine dummy apis.
Comments
Post a Comment