Question

我有一个“登录组件”，将变量初始化为：

  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”，“用户名”：“ ariba”，“密码”：“ abc”}]

当我使用凭据登录到UI时，在控制台上出现以下错误消息：

at ngOnInit
getUsers
undefined

，除了“ this.Users不可迭代”的错误外，没有其他内容，这是合理的，因为this.Users是未定义的。显然，“ subscribe（）”函数没有被触发，或者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的“网络”选项卡中看到的内容： network tab

Answer 1

尝试在订阅代码本身中打印数据，

this.httpClientService.getUsers().subscribe((response) =>{
        console.log("at subscribe");
        console.log(response);
        this.Users=response;
      }
);

Answer 2

由于订阅是一个Async进程，因此在该部分代码中打印this.Users会给您一个未定义的信息。

您应该看到console.log("at subscribe");的记录。

在函数调用后将console.log(this.Users);放入订阅中

this.handleSuccessfulResponse(response);

对于未调用该API的消息，您会在“网络”标签中看到该调用吗？

Answer 3

尝试将用户声明为空数组，而不是未定义的数组。假设您在DOM中使用* ngFor，并且未定义的对象无法迭代。

HTTP请求是异步的，因此不一定会在DOM呈现之前完成。如果您将用户定义为空白数组，则可以对其进行迭代，直到您的用户来自服务器为止。

public users: Array<User> = [];

Answer 4

尝试像这样修改您的方法

getUsers(): Observable<User[]>
{ 
  console.log("at  getUsers");
  return this.httpClient.get<User[]>('http://localhost:8080/findalluser');
}

角订阅功能未触发

4 个答案: