当我尝试登录时获取无效，并且提交按钮不起作用Angular 5

Question

嘿，我在登录身份方面有问题。我进行调试，发现我的数据库返回了我的空，但是在起作用之前。

所以我不知道为什么它不起作用。我尝试所有的东西找到错误，但找不到。

我尝试删除auth。问题在于，如果我在验证之前制作console.log，它将起作用。在验证之前的方法登录中，在if语句中，它将给我null

database.service

import { Injectable } from '@angular/core';
import {User} from '../model/user';
import {serialize} from 
'@angular/compiler/src/i18n/serializers/xml_helper.d';
 @Injectable()
 export class DatabaseService {
 User: User;
  constructor() {
  this.User = JSON.parse(localStorage.getItem('user'));
  }
 login(email:string, password:string):boolean {
   //GIVE ME HERE UNDEFIEND
   if(email == 'admin' && password == 'admin'){
     this.User = {
      email:'admin',
      password:'admin'
   }
 }
  localStorage.setItem('user',JSON.stringify(this.User));
  return this.checkLogin();
 }
 logOut(): void{
  localStorage.clear();
 }
checkLogin():boolean{
 return (this.User != null);
 }
}

login.component

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {NgForm} from '@angular/forms';
import {DatabaseService} from '../../service/database.service';
import {Router} from '@angular/router';

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
 constructor(private database:DatabaseService,private router:Router) { }
 onFormSubmit(myForm:NgForm){
if(myForm.valid){
 //THE VALIDATION HERE IS WORKS
//THE STATEMENT DONT WORK.THE BUTTON DONT WORK.
  if(this.database.login(myForm.value['email'],myForm.value['password'])){   
    this.router.navigate(['dashboard']);
   }
  }
 }
  ngOnInit() {
  }
 }

html登录

<form #myForm="ngForm" (submit)="onFormSubmit(myForm)" method="GET">
<input type="text" name="email" placeholder="Enter email">
<input type="password" name="password" placeholder="Enter Password">
<button type="submit">Log In</button>
</form>
<router-outlet></router-outlet>

用户模块

export class User{
email:string;
password:string;
};

Answer 1

您应该从登录方法返回布尔值

login(email:string, password:string):boolean {
   if(email == 'admin' && password == 'admin'){
       this.User = {
           email:'admin',
           password:'admin'
       };
       return true;
   }
   return false;
}

您的模板是错误的，您不会使用任何绑定到模型，请查看https://angular.io/guide/forms或https://angular.io/guide/reactive-forms将模板更改为

<form #myForm="ngForm" (submit)="onFormSubmit(myForm)" method="GET">
<input type="text" name="email" [(ngModel)]="email" placeholder="Enter email">
<input type="password" name="password" [(ngModel)]="password" placeholder="Enter Password">
<button type="submit">Log In</button>
</form>
<router-outlet></router-outlet>

和您的组件

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {NgForm} from '@angular/forms';
import {DatabaseService} from '../../service/database.service';
import {Router} from '@angular/router';

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
 email: string;
 password: string;
 constructor(private database:DatabaseService,private router:Router) { }
 onFormSubmit(myForm:NgForm){
if(myForm.valid){
 //THE VALIDATION HERE IS WORKS
//THE STATEMENT DONT WORK.THE BUTTON DONT WORK.
  if(this.database.login(this.email, this.password)){   
    this.router.navigate(['dashboard']);
   }
  }
 }
  ngOnInit() {
  }
 }