无法使用Angular 15进行HTTP请求

huangapple go评论94阅读模式
英文:

Can't make http request with Angular 15

问题

由于某种原因,我无法让我的Angular 15应用程序发送HTTP请求。我习惯了旧版本的Angular,所以我想知道是否有一些我遗漏或其他配置。我已经在app.module.ts的imports中添加了HttpClientModule。我知道不是端点的问题,因为我在Postman的服务中使用完全相同的URL,它可以正常访问。我缺少什么。感谢任何帮助!

服务:

  1. import { HttpClient, HttpParams } from '@angular/common/http';
  2. import { Injectable } from '@angular/core';
  3. @Injectable({
  4. providedIn: 'root',
  5. })
  6. export class MainFeedService {
  7. baseUrl: string = 'http://localhost:3000';
  8. constructor(private http: HttpClient) {}
  9. getMainFeed(userId: string) {
  10. const param = new HttpParams().set('userId', userId);
  11. const params = param;
  12. return this.http.get<{
  13. records: any;
  14. totalPosts: number;
  15. }>('http://localhost:3000/local/main-feed', { params });
  16. }
  17. }

组件:

  1. import { Component } from '@angular/core';
  2. import { takeUntil } from 'rxjs';
  3. import { MainFeedService } from 'src/services/trades.service';
  4. @Component({
  5. selector: 'app-main-feed',
  6. templateUrl: './main-feed.component.html',
  7. styleUrls: ['./main-feed.component.scss'],
  8. })
  9. export class MainFeedComponent {
  10. destroy: any;
  11. totalPosts = 0;
  12. userId = 'test';
  13. constructor(private mainFeedService: MainFeedService) {}
  14. ngOnInit() {
  15. this.mainFeedService
  16. .getMainFeed(this.userId)
  17. .pipe(takeUntil(this.destroy))
  18. .subscribe((res: any) => {
  19. console.log('RES', res);
  20. });
  21. }
  22. }
英文:

For some reason I can't get my Angular 15 app to send an http request. I'm used to an older version of Angular so I wonder if it's some configuration I'm missing or something. I also already added HttpClientModule under imports in app.module.ts. I know it's not the endpoint because I use that exact same url in my service in postman and it hits it no problem.
What am I missing. I appreciate any help!

service:

  1. import { HttpClient, HttpParams } from &#39;@angular/common/http&#39;;
  2. import { Injectable } from &#39;@angular/core&#39;;
  3. @Injectable({
  4. providedIn: &#39;root&#39;,
  5. })
  6. export class MainFeedService {
  7. baseUrl: string = &#39;http://localhost:3000&#39;;
  8. constructor(private http: HttpClient) {}
  9. getMainFeed(userId: string) {
  10. // const totalRecords = totalPosts ? totalPosts.toString() : undefined;
  11. const param = new HttpParams().set(&#39;userId&#39;, userId);
  12. const params = param;
  13. return this.http.get&lt;{
  14. records: any;
  15. totalPosts: number;
  16. }&gt;(&#39;http://localhost:3000/local/main-feed&#39;, { params });
  17. }
  18. }

component:

  1. import { Component } from &#39;@angular/core&#39;;
  2. import { takeUntil } from &#39;rxjs&#39;;
  3. import { MainFeedService } from &#39;src/services/trades.service&#39;;
  4. @Component({
  5. selector: &#39;app-main-feed&#39;,
  6. templateUrl: &#39;./main-feed.component.html&#39;,
  7. styleUrls: [&#39;./main-feed.component.scss&#39;],
  8. })
  9. export class MainFeedComponent {
  10. destroy: any;
  11. totalPosts = 0;
  12. userId = &#39;test&#39;;
  13. constructor(private mainFeedService: MainFeedService) {}
  14. ngOnInit() {
  15. this.mainFeedService
  16. .getMainFeed(this.userId)
  17. .pipe(takeUntil(this.destroy))
  18. .subscribe((res: any) =&gt; {
  19. console.log(&#39;RES&#39;, res);
  20. });
  21. }
  22. }

答案1

得分: 1

destroy通知可观察对象默认未定义。应该使用Subject定义它。

  1. destroy = new Subject();
英文:

destroy notifier observable is undefined by default. It should be defined with Subject

  1. destroy = new Subject();

huangapple
  • 本文由 发表于 2023年6月22日 08:55:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/76528027.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定