未触发角度订阅功能

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');
  }

网址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 的网络选项卡中看到的内容：

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"); tho 的记录。

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

this.handleSuccessfulResponse(response);

对于未调用的 API，您是否在网络选项卡中看到调用？

Answer 3

尝试将 users 声明为一个空数组，而不是 undefined。假设你在 DOM 中使用 *ngFor 并且 undefined 不能被迭代。

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

public users: Array<User> = [];

Answer 4

尝试像这样修改你的方法

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