Angular 显示登录用户详细信息

Question

I have a custom JSON file with default users. I want to search through the file to find matching user inputs and then login the user. Am getting nothin, ps assist?

My login code is like

  onLogin() {
    this.login = this.loginForm.value;
    this.em = this.login.email;
    this.pw = this.login.pword;
    this.userservice.checkUser(this.em, this.pw)
      .subscribe(user => this.user = user);
    console.log(this.em, this.pw, this.user);
  }

My user.service.ts file is like

  checkUser(email: string, pword: string): Observable<User> {
    return of(USERS.filter((user => user.email === email && user.pword === pword))[0]).pipe(delay(1000));
  } 

The HTML file is like

  <mat-card *ngIf="user">
    <mat-card-content>
      Bla bla bla
    </mat-card-content>
  </mat-card>

Answer 1

Move the console.log where you are checking the value of 'user' into the subscribe block. Currently, the console.log is executing before the observable emits a value.

onLogin() {
    this.login = this.loginForm.value;
    this.em = this.login.email;
    this.pw = this.login.pword;
    this.userservice.checkUser(this.em, this.pw).subscribe(user => {
        this.user = user;
        console.log(this.em, this.pw, this.user);
    });
}