Question

我对Angular完全陌生，我已经使用SpringBoot 2.0.5.RELEASE，Angular 5和spring数据创建了一个项目，以构建端到端的单页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.'，但是我不知道为什么

我创建用户时的链接地址是这个http://localhost:4200/api/users

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

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

从卷曲就可以了：

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

}

Answer 1

在Chrome中，按F12打开开发工具，然后转到“网络”标签。确保正在向端点发出请求，并且该请求没有引发错误。

Answer 2

首先，最好不要使用警报。使用console.log。其次，您只是在处理成功，而不是在处理失败。这样做：

createUser(): void {
  console.log('lala');
  this.userService.createUser(this.user)
    .subscribe(data => {
      console.log('User created successfully', data);
    },
    err => {
      console.log('There was an error', err);
    },
    () => {
      console.log('I have completed now and nothing will ever be emitted from this Observable again');
    });
}

如果HTTP响应不是成功响应，则将执行错误处理程序，如果响应的状态码不在2xx范围内，则将执行错误处理程序。

还要检查您的浏览器网络标签，以查看HTTP请求是否失败。

您可能还想调试此：

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

确保所有内容均符合预期。

订阅Angular

2 个答案: