时间戳

首页 > 解决方案 > 订阅 Angular

javascript - 订阅 Angular

问题描述

我对 Angular 完全陌生，我使用 SpringBoot 2.0.5.RELEASE、Angular 5 和 spring data 创建了一个项目来构建端到端的单页 Java Web 应用程序。我使用 spring boot 1.5 来公开 REST API，并使用带有路由的 angular5 来构建客户端，该客户端将使用服务器公开的 API。

我已经定义了这个组件：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { User } from '../models/user.model';
import { UserService } from './user.service';

@Component({
  templateUrl: './add-user.component.html'
})
export class AddUserComponent {

  user: User = new User();

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

  }

  createUser(): void {
    alert ('lala');
    this.userService.createUser(this.user)
        .subscribe( data => {
          alert('User created successfully.');
        });
  }
}

在页面中我可以看到警报lala，但不是，'User created successfully.'但我不知道为什么

我创建用户时的链接地址是this is thishttp://localhost:4200/api/users

这是我的proxy.config.json文件：

{
  "/api/*": {
    "target": "http://localhost:8080/user-portal",
    "secure": false
  }
}

从 curl 很好：

curl -X POST -H "Content-Type: application/json" "http://localhost:8080/user-portal/api/users"

和 user.service.ts：

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { User } from '../models/user.model';


const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class UserService {

  constructor(private http: HttpClient) {}

    private userUrl = '/api/users';

  public getUsers() {
    return this.http.get<User[]>(this.userUrl);
  }

  public deleteUser(user) {
    return this.http.delete(this.userUrl + '/'+ user.id);
  }

  public createUser(user) {
    return this.http.post<User>(this.userUrl, user);
  }

}

标签： javascriptangular

解决方案

在 Chrome 中按 F12 打开开发工具并转到网络选项卡。确保正在向端点发出请求并且它没有抛出和错误。

推荐阅读