Montada comunicación con API, pero devuelve un objeto undefined

src/app/api.service.ts

@@ -1,17 +1,18 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
-import { catchError, retry } from 'rxjs/operators';
+import { Observable, throwError, BehaviorSubject } from 'rxjs';
+import { catchError, retry, map, tap } from 'rxjs/operators';
 import { User } from './user';
 import { Discoteca } from './discoteca';
 import { UserLogin } from './user-login';
 
+
 @Injectable({
   providedIn: 'root'
 })
 export class ApiService {
 
-  url = '';
+  
 
   constructor(private http: HttpClient) {
 
@@ -20,8 +21,9 @@ export class ApiService {
 
   validateUser(user: UserLogin): Observable<User>{
 
-      return this.http.post<User>(this.url, user);
+      return this.http.post<User>("http://localhost:3307/api/consultas/users", user);
   }
 
 
+
 }

src/app/app-routing.module.ts

@@ -23,7 +23,7 @@ const routes: Routes = [
   },
   {
     path:'',
-    redirectTo: 'tabs',
+    redirectTo: 'login',
     pathMatch: 'full'
   },
 

src/app/login.service.ts

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 import { ApiService } from './api.service';
 import { User } from './user';
-import { UserLogin } from './user-login'
+import { UserLogin } from './user-login';
+
 
 @Injectable({
   providedIn: 'root'
@@ -10,17 +12,29 @@ export class LoginService {
 
   user: User;
 
-  constructor(private apiService: ApiService) {
-
+  constructor(private apiService: ApiService, private router: Router) {
+    this.user = {
+      id: 0,
+      userType: 0,
+      username: '',
+      password: ''
+    };
   }
 
-  validateUser(login: string, password: string): void{
-    let user : UserLogin = {
+  validateUser(login: string, password: string): User {
+
+    let userlogin: UserLogin = {
       loginUser: login,
       loginPassword: password,
     }
-      this.apiService.validateUser(user)
-      .subscribe((data: User) => this.user = {...data});
+
+    this.apiService.validateUser(userlogin)
+      .subscribe(user => this.user = user)
+
+    return this.user;
+
   }
 
+
+
 }

src/app/login/login.page.html

@@ -5,7 +5,14 @@
 </ion-header>
 
 <ion-content>
+  <span>Usuario: </span><input type="text" id="username">
+  <span>Contraseña: </span><input type="text" id="password">
   <ion-button (click)="login()">
     Login
   </ion-button>
+  <div>
+    <div *ngIf="user">
+      {{user.username}}
+    </div>
+  </div>
 </ion-content>

src/app/login/login.page.scss

@@ -0,0 +1,3 @@
+input{
+    color: black;
+}

src/app/login/login.page.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { LoginService } from '../login.service';
+import { User } from '../user';
 
 @Component({
   selector: 'app-login',
@@ -8,13 +10,23 @@ import { Router } from '@angular/router';
 })
 export class LoginPage implements OnInit {
 
-  constructor(private router: Router) { }
+  username: string;
+  password: string;
+  user: User;
+
+  constructor(private router: Router, private loginService: LoginService) { }
 
   ngOnInit() {
+    this.user = this.loginService.user;
   }
 
-  login(){
-    this.router.navigate(['/tabs']);
+  async login() {
+
+    this.username = (<HTMLInputElement>document.getElementById("username")).value;
+    this.password = (<HTMLInputElement>document.getElementById("password")).value;
+    this.user = await this.loginService.validateUser(this.username, this.password);
+    console.log(this.user.username);
+
   }
 
 }

src/app/user.ts

@@ -1,6 +1,6 @@
 export interface User {
-  userId: number;
+  id: number;
   userType: number; 
-  loginUser: string;
-  loginPassword: string; 
+  username: string;
+  password: string; 
 }