从nodejs获取json数据到Angular 6

Question

我的app.get('/post', (req,res) =>{ let data = [{ userId: 10, id: 98, title: 'laboriosam dolor voluptates', body: 'doloremque ex facilis sit sint culpa{ userId: 10' }, { id: 99, title: 'temporibus sit alias delectus eligendi possimus magni', body: 'quo deleniti praesentium dicta non quod' }]; res.status(200).json(data); }); 是-

my.service.ts

我的export class MyService { constructor(private http: HttpClient) { } fetchData(): any { console.log('reaches'); return this.http.get('/post').pipe( map((post) => { console.log(post.json()); return post.json(); }) ); } } 是-

sem.component.ts

我的export class SemComponent implements OnInit { posts: any = []; constructor(private myService: MyService) { } ngOnInit() { console.log('reaches'); this.myService.fetchData().subscribe(posts => { this.posts = posts; console.log(posts); }); } } 是-

Routes

我的export const myRoutes: Routes = [ { path: 'post', component: SemComponent }] 是-

app.js

这是我获取angular中json数据的方法。

当我运行url时：“ localhost：3000 / post”。

无法到达我的service.ts代码。

它直接显示showMaximized()文件中的json数据

Answer 1

export class MyService {
  constructor(private http: HttpClient) { }
    fetchData(): Promise<any> {
      return this.http
      .get("url").toPromise()
      .then((response)=>{
        return response;
      })
      .catch((error)=>{
        console.log(error)
      })
  }
}

，在SemComponent中，您可以按以下方式使用返回的数据。

export class SemComponent implements OnInit {
posts: any = [];
constructor(private myService: MyService) { }
    ngOnInit() {
        console.log('reaches');
        this.myService.fetchData().then(data => {
          this.posts = data;
          console.log(this.posts);
        });
    }
}

Answer 2

您正在同一端口和上下文上运行Web服务器（app.js）和angular应用程序。您应该尝试更改其中之一的端口号和上下文（“ / post”）。

冲突在这里，路由器路径和app.js请求上下文为“ post”。

请检查应用程序的端口和上下文，它应该可以解决问题。