Angular 订阅 function 未触发

Question

I have a "Login Component" that initializes variables as:

  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() fucntion is as:

  getUsers()
  { console.log("at  getUsers");

    return this.httpClient.get<User[]>('http://localhost:8080/findalluser');
  }

The URL http://localhost:8080/findalluser successfully returns: [{"id":"1001","username":"ariba","password":"abc"}]

When I login in to the UI with the credentials, I get an error with the following message on console:

at ngOnInit
getUsers
undefined

and nothing else apart from the error that "this.Users is not iterable" which is justified because this.Users is undefined. Apparently, the "subscribe()" function is not being triggered or maybe the httpClient isn't returning the Observable at all. I can't get why?

Update:

Here's the whole Service code -

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!");
      }
  })
  }

}

This is what I see in Network Tab on Devtools as I reload my Login page:

Answer 1

Try printing the data within the subscribe code itself,

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

Answer 2

Since the subscription is an Async process is correct that printing this.Users in that part of the code gives you an undefined.

You should see logged that console.log("at subscribe"); tho.

Put the console.log(this.Users); inside the subscription after the function call

this.handleSuccessfulResponse(response);

For the API not being called do you see the call in the network tab?

Answer 3

Try declaring users as an empty array to begin with instead of undefined. Assuming you are using *ngFor in the DOM and undefined can't be iterated over.

The HTTP request is async so it won't necessarily complete before the DOM renders. If you define users as a blank array it can iterate over this until your users come from server.

public users: Array<User> = [];

Answer 4

Try modifying your method like this

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