角Http.get請求（JSON數據正確地返回，但不顯示，沒有使用模擬API工作）

Question

錯誤控制檯：當我部署的發生

Error with getting users from service. Response with status: 404 Not Found for URL: http://localhost:8080/ChatApp/GetAllUsersServlet 

同樣的問題外部項目在某處，所以與url： http://java.cyclone2.khleuven.be:38034/ChatApp/GetAllUsersServlet 你可以看到自己是一個工作的網址與JSON在裏面，但斯蒂爾404錯誤。

角碼本地服務器上運行的servlet的JSON期待：

export class UserService { 
    // private usersUrl = 'api/users'; // mock api 
    private usersUrl = 'http://localhost:8080/ChatApp/GetAllUsersServlet'; // external users from local server 
    private headers = new Headers({'Content-Type': 'application/json'}); 

    constructor(private http: Http) { } 
    getUsers(): Promise<User[]> { 
    return this.http.get(this.usersUrl) 
       .toPromise() // Http.get returns RxJS Observeable, converted to Promise here 
       .then(response => response.json().data as User[]) // .data for mock inMemoryDataService 
       .catch(this.handleError); 
    } 

什麼Servlet的回報：

[{"fname":"TestFname","password":"test","gender":"Female","name":"TestName","id":1,"email":"test@test.com","age":21,"username":"Test","status":"offline"},{"fname":"Test4Fname","password":"test","gender":"Female","name":"Test4Name","id":4,"email":"test4@test.com","age":21,"username":"Test4","status":"offline"},{"fname":"Test3Fname","password":"test","gender":"Female","name":"Test3Name","id":3,"email":"test3@test.com","age":28,"username":"Test3","status":"offline"},{"fname":"Test2Fname","password":"test","gender":"Male","name":"Test2Name","id":2,"email":"test2@test.com","age":22,"username":"Test2","status":"offline"}] 

在模擬API此確切的事情，確實給正確的結果：

import { InMemoryDbService } from 'angular-in-memory-web-api'; 
export class InMemoryDataService implements InMemoryDbService { 
    createDb() { 
    let users = [{"fname":"TestFname","password":"test","gender":"Female", 
     "name":"TestName","id":1,"email":"test@test.com","age":21,"username":"Test","status":"offline"}, 
     {"fname":"Test4Fname","password":"test","gender":"Female", 
     "name":"Test4Name","id":4,"email":"test4@test.com","age":21,"username":"Test4","status":"offline"},{"fname":"Test3Fname","password":"test","gender":"Female","name":"Test3Name","id":3,"email":"test3@test.com","age":28,"username":"Test3","status":"offline"}, 
     {"fname":"Test2Fname","password":"test","gender":"Male", 
     "name":"Test2Name","id":2,"email":"test2@test.com","age":22,"username":"Test2","status":"offline"}] 
    return {users}; 
    } 
} 

任何幫助將不勝感激，因爲我真的不知道爲什麼它不會工作。嘗試了類似的東西，但只是更少的JSON數據，這是有效的。 是的，servlet的服務器在本地運行。

getUsers（）被使用，並通過該顯示，但由於它與模擬數據的工作，這應該沒問題？：

export class UsersComponent { 
    users: User[]; 
    selectedUser: User; 

    constructor(
     private userService: UserService, 
     private router: Router) { } 

    gotoInfo(): void { 
     this.router.navigate(['/info', this.selectedUser.username]); 
    } 
    onSelect(user: User): void { 
     this.selectedUser = user; 
    } 
    getUsers(): void { 
     this.userService.getUsers().then(users => this.users = users); 
    } 
    ngOnInit(): void { 
     this.getUsers(); 
    } 
} 

的Servlet（啓用CORS）：

保護無效的processRequest（HttpServletRequest的請求，HttpServletResponse響應）拋出ServletException異常，IOException {UserDB db = new UserDB（）;

JSONArray array = new JSONArray(); 
for (User users: db.getAll()) { 
    try { 
     array.put(users.getJSONObject()); 
    } catch (JSONException e) { 
     // TODO Auto-generated catch block 
     e.printStackTrace(); 
    } 
} 

// setting the response type to json 
response.setContentType("application/json"); 
// setting the CORS request 
response.setHeader("Access-Control-Allow-Origin", "*"); 

response.getWriter().write(array.toString()); 

Answer 1

以前使用內存中的Web-API將破壞你的HTTP請求，除非你刪除像從NgModule以下InMemoryWebApiModule.forRoot(InMemoryDataService)，那麼你的請求應該罰款去。

編輯：根據您知道下面的代碼註釋實現：通過

此過程完成後，我還可以指出的是，你有一個問題，你的GET請求，因爲它代表你不會獲取組件中的任何數據。您的迴應只是包含一個數組，而不是 data，所以它應該只是：

.then(response => response.json() as User[])