Question

我有一个极简主义的Nativescript hello world应用程序。它只有2个屏幕，登录＆＃39;和＆＃39;列表＆＃39;。

以下是流程：

用户在第一个屏幕中按下登录按钮。
显示第二个屏幕，假设显示名称列表;但没有显示任何内容。
如果我在文本字段中输入单个字符，则会显示该列表。

我一直在搜索Stack Overflow和Github，似乎其他人面临的问题有点复杂，比如＆＃34;列表在http调用之后没有得到更新＆＃34;等

所以我似乎在这里犯了一些明显的错误，因为这个基本场景应该只是工作＆＃39;。但那个小小的错误暗示了我。

这是我的登录文件：

/*login.component.ts*/
import { Component } from "@angular/core";
import firebase = require("nativescript-plugin-firebase");
import * as Rx from "rxjs";
import { MyFireLoginService } from '../../mobile-fire/fire-login.service'
import { Router } from "@angular/router";
import { Observable } from "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)
  }

}

和列表文件：

import { Component } from "@angular/core";
import firebase = require("nativescript-plugin-firebase");
import * as Rx from "rxjs";
import { MyFireLoginService } from '../../mobile-fire/fire-login.service'
import { Router } from "@angular/router";
import { Observable } from "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 for 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>

编辑：以下是两个组件的生命周期事件的日志：

JS: LOGIN:ngDoCheck called
JS: LOGIN:ngAfterContentChecked called
JS: LOGIN:ngAfterViewChecked called
JS: Auth state changed.
JS: a <==== This is me typing 'a' in the 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

我觉得奇怪的是，在我输入＆＃39; a＆＃39;之前，我不会调用List组件的init。在List组件内的文本框中。此外，LOGIN组件的生命周期事件即使在它不在视野之外也会被调用。

Update1 ：我按照nativescript.org上的教程进行操作。那里的代码似乎工作正常。我怀疑，包含firebase插件有问题。当我知道更多时会更新。

Update2 ：我使用的是firebase api的部分内容，它与虚拟API一起工作正常。

Nativescript Listview没有显示任何内容

0 个答案: