Angular2无法获取任何响应数据

Question

我正在尝试从API读取响应。我可以使用PostMan阅读它，但我的变量"；this.data"；始终为null。我已经尝试了很多不同的迭代，但似乎无法让它发挥作用。如有任何帮助，我们将不胜感激。该方法名为"loginSubmitHandler"。

此处为完整代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router'

@Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
myFormL: FormGroup;
// Form state
loading = false;
failure = false;
// Form Data
readonly ROOT_URL = 'http://localhost:5000/api';
data:any = [];
selectedFile: File = null;
// REGEX
namePattern = "^[a-zA-Z]{3,15}$";
unamePattern = "^[a-z0-9_-]{8,25}$";
pwdPattern = "^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?!.*s).{6,12}$";
mobnumPattern = "^((\+91-?)|0)?[0-9]{10}$"; 
emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$";
constructor(private http: HttpClient, private fb: FormBuilder, private fbL: FormBuilder, private _router: Router) {
this.data = null;
}
ngOnInit() {
this.myFormL = this.fbL.group({
email: [null, [Validators.required, Validators.pattern(this.emailPattern)]],
password: [null, [Validators.required, Validators.pattern(this.pwdPattern)]],
});
}
async loginSubmitHandler() {
this.loading = true;
try {
let url = this.ROOT_URL + "/CheckLogin/" + this.myFormL.get('email').value + "/" + this.myFormL.get('password').value;
await this.getData(url);
console.log(this.data);

this.success = true;
this._router.navigate(['/home']);
} catch (err) {
console.error(err);
this.failure = true;
}
this.loading = false;
}
getData(url) {
this.data = null;
this.http.get<any>(url).subscribe(data=>{
this.data = data.email;
});
}
}

Answer 1

如果你订阅它，你会得到数据，如下所示，await是promise的关键字，但在可观察的模式中，没有这样的词。您还可以通过说observatory.toPromise((将observatory转换为promise，然后使用await。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router'


@Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
myFormL: FormGroup;

// Form state
loading = false;
failure = false;

// Form Data
readonly ROOT_URL = 'http://localhost:5000/api';
data:any = [];
selectedFile: File = null;

// REGEX
namePattern = "^[a-zA-Z]{3,15}$";
unamePattern = "^[a-z0-9_-]{8,25}$";
pwdPattern = "^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?!.*s).{6,12}$";
mobnumPattern = "^((\+91-?)|0)?[0-9]{10}$"; 
emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$";

constructor(private http: HttpClient, private fb: FormBuilder, private fbL: FormBuilder, private _router: Router) {
this.data = null;
}

ngOnInit() {
this.myFormL = this.fbL.group({
email: [null, [Validators.required, Validators.pattern(this.emailPattern)]],
password: [null, [Validators.required, Validators.pattern(this.pwdPattern)]],
});
}

async loginSubmitHandler() {
this.getData(url).subscribe(data => {
this.loading = true;

try {
let url = this.ROOT_URL + "/CheckLogin/" + this.myFormL.get('email').value + "/" + this.myFormL.get('password').value;

console.log(data);

this.success = true;
this._router.navigate(['/home']);
} catch (err) {
console.error(err);
this.failure = true;
}
this.loading = false;
});
}

getData(url) {
this.http.get<any>(url);
}

}