Angular中API调用未执行，但链接在Postman可正常使用问题排查

我正在为训练营开发一个应用，功能包括：调用第三方API获取犬种信息，使用自研的两个API，通过EF将用户信息和用户收藏的犬种存储到两个SQL数据库中，前端采用Angular实现交互。

当前遇到的问题：通过模态表单创建User对象后，调用自定义API存入SQL数据库时，开发者工具显示链接字符串已生成、对象参数完整，但API调用未触发，数据也未存入数据库。不过将生成的链接字符串复制到Postman中调用，可正常添加用户到数据库。

前端 #

用户接口 #

export interface IUser{
    Id?: number
    firstName: string
    lastName: string
    email: string
    password: string
}

api.service.ts #

export class ApiService {
  private breedUri = 'https://dog-breeds2.p.rapidapi.com/dog_breeds';
  private userApi ='https://localhost:7078/api/Users';
  private faveApi ='https://localhost:7078/api/FavoriteBreeds';

  constructor(private http: HttpClient){}

  addUser(newUser: IUser){
   const linkString = (this.userApi+"/add?firstName="+newUser.firstName+"&lastName="+newUser.lastName+"&email="+newUser.email+"&password="+newUser.password)
    console.log("user api link created",{linkString})
   return this.http.post(this.userApi +"/add", newUser)
  }
}

app.component.ts 中的方法 #

constructor(private api: ApiService){}

addNewUser(){
    this.addform = document.getElementById('loginForm');
    const formData = new FormData(this.addform);

    let newUser: IUser = {
        firstName: formData.get("firstName") as string,
        lastName: formData.get("lastName") as string,
        email: formData.get("email") as string,
        password: formData.get("psw") as string
    };
    console.log("user object being created check", {newUser})
    this.api.addUser(newUser);
}

后端 #

[Route("api/[controller]")]
[ApiController]
public class UsersController : Controller
{
    UsersRepository repo=new UsersRepository();

    [HttpPost("add")]
    public Users AddNewUser(Users newUser)
    {
        return repo.AddNewUser(newUser);
    }
}

原因 #

Angular的HttpClient.post返回的是Observable，这是RxJS的惰性对象，只有调用subscribe()方法订阅它时，才会实际触发HTTP请求。当前代码仅调用了this.api.addUser(newUser)但未订阅，因此请求从未发送。

修复 #

修改app.component.ts中的addNewUser方法，添加订阅逻辑：

addNewUser(){
    this.addform = document.getElementById('loginForm');
    const formData = new FormData(this.addform);

    let newUser: IUser = {
        firstName: formData.get("firstName") as string,
        lastName: formData.get("lastName") as string,
        email: formData.get("email") as string,
        password: formData.get("psw") as string
    };
    console.log("user object being created check", {newUser})
    
    // 添加订阅触发请求
    this.api.addUser(newUser).subscribe({
        next: (response) => {
            console.log('用户添加成功', response);
            // 可在此添加表单重置、关闭模态框等后续逻辑
        },
        error: (err) => {
            console.error('添加用户失败', err);
            // 处理错误情况
        }
    });
}

额外说明 #

• 你的api.service.ts中构造的linkString是基于URL查询参数的方式，但实际post请求是将newUser作为请求体发送，后端的AddNewUser方法默认会从请求体绑定参数，当前写法正确，Angular的HttpClient会自动设置Content-Type: application/json请求头，确保后端能正确解析参数。
• Postman能成功调用是因为手动触发了请求，而Angular中必须通过订阅Observable来触发。

内容的提问来源于stack exchange，提问作者john Rizzo