В угловом использовании HttpClient я не могу получить данные JSON.Когда я отправляю форму и обрабатываю ее в функции onSubmit (), она показывает неопределенное в консоли

Question

Я создаю простую страницу входа в Angular.Когда пользователь нажимает кнопку «Отправить», я в настоящее время хотел получить информацию для входа в систему в виде json из локального файла ( assets / login.json ).

Я перешел по этой ссылке и надоело копировать его всеми показанными альтернативными способами, но безуспешно также использовал эту ссылку .Но безуспешно.

Я прилагаю 2 основных файла, в которых остается логика.Не могли бы вы помочь мне с этим?

* Кодирование в угловых 5

Имя файла: login.component.ts

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ILoginDetails, LoginService } from './login.service';


import { FormGroup, FormBuilder, Validators, EmailValidator} from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'login-app' ,
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers: [LoginService]
})

export class LoginComponent implements OnInit {

    login_details: ILoginDetails;
    dummy: any = null;
    login: FormGroup;
    result: any = null;
    errorMessage: string;
    emailPattern: any = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    constructor(private loginService: LoginService ,private frmBuilder: FormBuilder) { }

    ngOnInit(){
        this.login = this.frmBuilder.group({
            email:["", [Validators.required]],
            password: ["", [Validators.required]]
        });
    }
    
    get email() { return this.login.get('email'); }
    get password() { return this.login.get('password'); }
    isSubmitted: boolean = false;

    // constructor( private loginService: LoginService ){ }
    // title = 'Login';
    onSubmit() {
        if ( !this.login.valid ) {
            return;
        }
        // Code to send to the network to validate
        this.loginService.checkLogin();
        .subscribe((data: ILoginDetails) => this.login_details = { ...data });
            console.log(this.login_details);
    }
    reset() {
        this.isSubmitted = false;
        this.login.reset();
    }
}

---

Имя файла: login.service.ts

import { Injectable } from '@angular/core';
// import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';

import { catchError, retry } from 'rxjs/operators';

export interface ILoginDetails {
    username: string;
    email: string;
    password: string;
}

@Injectable()
export class LoginService {
    private _loginUrl = 'assets/login.json';
    constructor(private _http: HttpClient) { }

    checkLogin() {
        return this._http.get<ILoginDetails>(this._loginUrl)
        .pipe(
        retry(3), // retry a failed request up to 3 times
        catchError(this.handleError) // then handle the error
       );
    }
   
  // Prints for errors
  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  }
}

Answer 1

Перво наперво: При фактическом сетевом вызове для входа в систему вам нужно будет отправить запрос POST ! Так что проверьте эту ссылку для этого! и в вызове get также важен метод подписки, поскольку это асинхронный вызов!.

Код, который будет работать на 100% без проблем:

// FileName: login.service.ts
// Inside checkLogin() remove the ILoginDetails interface. the code should look like this... 

checkLogin() {
        return this._http.get(this._loginUrl)
        .pipe(
        catchError(this.handleError) // then handle the error
       );
    }

Теперь в файле "login.component.ts" измените метод onSubmit () с помощью этого кода ...

onSubmit() {
        if ( !this.login.valid ) {
            return;
        }
        // Code to send to the network to validate
        this.loginService.checkLogin();
        .subscribe(data => {  
            console.log(data);
        });
    }

* Это 100% рабочий код, я проверял, проверял и использую его!

---

Приведенный ниже метод работает только при наличии локального файла json.
Если вы хотите поэкспериментировать , приведенный ниже код также будет работать, но только для файлов на одном сервере, например: файл assets / login.json!

Просто следуйте этим шагам

Имя файла: login.component.ts
Я избавился от подписки и создал переменную dummy с типом any, а затем использовал ее, как указано ниже!

    onSubmit() {
        if ( !this.login.valid ) {
            return;
        }
        // this method will check for login
        this.dummy = this.loginService.checkLogin();
        // this.loginService.checkLogin()
        // .subscribe(
        //     (data: ILoginDetails) => this.login_details = { ...data });

            this.dummy.forEach(element => {
                if (element.email == this.email.value && element.password == this.password.value) {
                    this.result = "Acccess Granted";
                    return;
                }
                this.result = "Access Denied";
            }
        );
       
    }

. ::: Любые предложения и новые подходы всегда приветствуются и поддерживаются :::.

Answer 2

        this.loginService.checkLogin()
        .subscribe((data: ILoginDetails) => {this.login_details = {
           ...data 
         };
         console.log(this.login_details); // here will print
        //here add more logic hangling your check - its the callback
       });

Поскольку http-клиент выполняется в асинхронном режиме, вы предоставляете обратный вызов, представляющий собой блок кода, который будет выполнен позже в будущем, как только http-запрос будет завершен.

К тому времени, когда вы достигнете вашего console.log (), запрос еще не завершен (едва запущен), поэтому данных еще нет. Поместите ваш код обработки в функцию обратного вызова.

Добро пожаловать в мир асинхронности