无法通过Angular中的API获取JsonNode数据（使用Spring Boot）

Question

这是控制器

@RestController
public class UserCmsController {

    @Autowired
    Utility utility;
    @Autowired
    ObjectMapper objectMapper;
    @Autowired
    UserService userService;

    @CrossOrigin
    @RequestMapping(value = "/cms/user/all", method = RequestMethod.GET)
    public JsonNode getAllUsers(HttpServletRequest httpServletRequest) throws IOException {

        JSONArray response = new JSONArray();

        List<User> users = new ArrayList<>();

        try {
            users = userService.getAllUsers();
            if (users.size() > 0) {
                response = new JSONArray(utility.convertPOJOtoString(users));
            } else {
                response = new JSONArray();
            }
        } catch (Exception e) {
            return objectMapper.readTree(utility.createResponse(500, Keyword.ERROR, e.toString()).toString());
        }

        return objectMapper.readTree(response.toString());
    }

}

它正在正确获取数据。 我正在尝试通过调用此api使用angular在html页面的表中获取数据。 这是userapi.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserApi {

    constructor(private httpclient: HttpClient) { }

    getAllTheUsers(): Observable<any> {
        return this.httpclient.get("localhost:8080/cms/user/all")
    }

}

这是users.ts

export class Users {
    public id: number;
    public firstName: string;
    public lastName: string;
    public email: string;
    public contact: string;
    public status: string;
}

这是app.component.html

<table>
  <thead></thead>
  <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Contact</th>
      <th>Status</th>
  </tr>

  <tbody>
      <tr *ngFor="let u of listOfUsers">
          <td>{{u.id}}</td>
          <td>{{u.firstName}}</td>
          <td>{{u.lastName}}</td>
          <td>{{u.email}}</td>
          <td>{{u.contact}}</td>
          <td>{{u.status}}</td>
      </tr>
  </tbody>
</table>

这是app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { UserApi } from './services/userapi.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [UserApi],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是app.component.ts

import { Component } from '@angular/core';
import { UserApi } from './services/userapi.service';
import { Users } from './classes/users';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //title = 'projectAngular';
  constructor(private _userAPI: UserApi) {
  }

  listOfUsers: Users[];

  ngOnInit() {
    this._userAPI.getAllTheUsers().subscribe(
      data => {
        this.listOfUsers = data;
      }
    );
  }

}

假设

localhost：4200可以用表中的数据生成此页面。 请在这里提供帮助，我无法检索数据。