角度Http.get要求は、コンソールで

Question

エラー（JSONデータは、モックAPIで動作し、正常に返しますが、表示されません）外部プロジェクトのどこかにあるので、urlで： http://java.cyclone2.khleuven.be:38034/ChatApp/GetAllUsersServlet jsonが動作しているが、stil 404エラーであることがわかります。

ローカルサーバー上で実行されているサーブレットから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); 
    } 

何サーブレットを返す：

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

：、正しい結果が得られない

[{"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のこの正確な事

私は本当になぜそれが動作しないのかわからないので、助けていただければ幸いです。似たようなものを試してみましたが、ほんのわずかなjsonデータが試されています はい、サーブレットのサーバーがローカルで実行されています。

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

サーブレット（CORS有効）：

保護され、ボイドのprocessRequest（HttpServletRequestをリクエスト、HttpServletResponseレスポンス）ServletException、IOExceptionをスローする{ UserDB db = new UserDB（）;あなたはNgModuleから次InMemoryWebApiModule.forRoot(InMemoryDataService)のようなものを削除しない限り、以前にHTTP-要求にメモリ内のウェブ-APIの意志の混乱を使用して

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

、その後、あなたの要求は罰金行くべきです。

EDIT：あなたは次のことを知っていたコードのコメントに基づいて実現：

これが行われた後、私はそれはあなたがしませんスタンドとしてあなたは、あなたのGETリクエストに問題があることも指摘することができますコンポーネント内のデータを取得します。あなたの応答は、単にアレイ、ない dataが含まれているので、それだけで次のようになります。

あなたのhtmlにバインドするにはどうすればよい

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