[英]Angular subscribe function not being triggered
我有一个“登录组件”,将变量初始化为:
ngOnInit() {
console.log("at ngOnInit");
this.httpClientService.getUsers().subscribe(
response =>{
console.log("at subscribe");
this.handleSuccessfulResponse(response);
}
);
console.log(this.Users);
}
handleSuccessfulResponse(response)
{
console.log("handle");
this.Users=response;
console.log(this.Users);
}
getUsers() 函数如下:
getUsers()
{ console.log("at getUsers");
return this.httpClient.get<User[]>('http://localhost:8080/findalluser');
}
URL http://localhost:8080/findalluser成功返回:[{"id":"1001","username":"ariba","password":"abc"}]
当我使用凭据登录 UI 时,我在控制台上收到错误消息并显示以下消息:
at ngOnInit
getUsers
undefined
除了“this.Users 不可迭代”的错误之外没有别的,这是合理的,因为 this.Users 是未定义的。 显然,“subscribe()”function 没有被触发,或者 httpClient 根本没有返回 Observable。 我不明白为什么?
更新:
这是整个服务代码 -
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { stringify } from '@angular/compiler/src/util';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'my-auth-token'
})
};
export class Employee{
constructor(
public empId:string,
public name:string,
public designation:string,
public salary:string,
) {}
}
export class User{
constructor(
public id:String,
public username:string,
public password:string,
) {}
}
export class UssdFiles{
constructor(
public filename:string,
public filepath:string,
) {}
}
export class SmsFiles{
constructor(
public filename:string,
public filepath:string,
) {}
}
export class Data{
constructor( public flines: String )
{}
}
export interface Post{
id: number;
userId: string;
body: string;
title: string;
}
@Injectable({
providedIn: 'root'
})
export class HttpClientService {
constructor(private httpClient:HttpClient) { }
getUsers()
{ console.log("getUsers");
return this.httpClient.get<User[]>('http://localhost:8080/findalluser');
}
getUssdFiles(){
return this.httpClient.get<UssdFiles[]>('http://localhost:8080/findallussd');
}
getSmsFiles(){
return this.httpClient.get<SmsFiles[]>('http://localhost:8080/findallsms');
}
getFileData(file:String){
//const str = JSON.stringify(this.httpClient.get<Data>('http://localhost:8080/getfiledata/'+file));
return this.httpClient.get<Data>('http://localhost:8080/getfiledata/'+file);
}
postFileData(fileData:Object){
console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
console.log(fileData)
return this.httpClient.post<Object>('http://localhost:8080/updatedfiledata',fileData).subscribe(response =>{
console.log(response);
//alert("File update successful!")
if(response==null){
alert("File update successful!");
}
})
}
}
这是我在重新加载登录页面时在 Devtools 的网络选项卡中看到的内容:
尝试在订阅代码本身中打印数据,
this.httpClientService.getUsers().subscribe((response) =>{
console.log("at subscribe");
console.log(response);
this.Users=response;
}
);
由于订阅是一个Async
过程是正确的,因此在该部分代码中打印this.Users
会给您一个未定义的结果。
您应该看到记录了console.log("at subscribe");
寿。
把console.log(this.Users);
在 function 调用之后的订阅内
this.handleSuccessfulResponse(response);
对于没有被调用的 API,您在网络选项卡中看到调用了吗?
尝试将 users 声明为一个空数组,而不是 undefined。 假设您在 DOM 中使用 *ngFor 并且 undefined 不能被迭代。
HTTP 请求是异步的,因此它不一定会在 DOM 呈现之前完成。 如果您将用户定义为一个空白数组,则它可以对其进行迭代,直到您的用户来自服务器。
public users: Array<User> = [];
尝试像这样修改您的方法
getUsers(): Observable<User[]>
{
console.log("at getUsers");
return this.httpClient.get<User[]>('http://localhost:8080/findalluser');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.