如何從 Express 中的 API 獲取要在 Angular 中顯示的數據？

Question

我正在嘗試使用 Nodejs/Express 作為從數據庫生成數據的后端。 我目前有一個 api 路由設置，以便數據庫查詢將導致其目錄。 因此，如果我當前訪問 localhost:3000/api，我將看到以下內容：

 {"status":200,"data":[{"Issuer_Id":1,"Data_Id":2,"Data_Name":"Name 1"},{"Issuer_Id":2,"Data_Id":14,"Data_Name":"Name 2"},{"Issuer_Id":2,"Data_Id":1,"Data_Name":"Name 3"}],"message":null}

這讓我相信我在后端正確設置了所有內容。

現在如何讓這些數據顯示在我的 Angular 前端？

我已經完成了數小時的教程，這就是我想出的：

導航組件.ts

 import { Component, OnInit } from '@angular/core'; import { DataService } from '../../data.service'; import { Series } from '../../data.service'; import {Observable} from 'rxjs/Rx'; @Component({ selector: 'app-fixed-nav', templateUrl: './fixed-nav.component.html', styleUrls: ['./fixed-nav.component.css'] }) export class FixedNavComponent implements OnInit{ serieses: Series[] ; constructor(private dataService: DataService) {} ngOnInit() { this.dataService.getSeries().subscribe((serieses: Series[]) => this.serieses = serieses); } }

數據服務.ts

 import { Injectable } from '@angular/core'; import { HttpClient } from'@angular/common/http'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/toPromise'; export class Series { Issuer_Id: number; Data_Id: number; Data_Name: string; } @Injectable() export class DataService { constructor(private _http: Http) {} getSeries(): Observable<Series[]> { return this._http.get("http://localhost:3000/api/") .map((res: Response) => res.json()); } }

app.module.ts

 import { Form1Module } from './modules/form1/form1.module'; import { FixedNavModule } from './modules/fixed-nav/fixed-nav.module'; import { HeaderModule } from './modules/header/header.module'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; import { HttpModule } from '@angular/http'; import { DataService } from './data.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule, HttpClientModule, HeaderModule, FixedNavModule, Form1Module, NgbModule.forRoot() ], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { }

我需要在 nav.component.html 中輸入什么才能看到結果？

另請注意，當我在 lcoalhost:4200 上刷新我的 angular 頁面時，我可以看到 GET 請求正在訪問 3000 express 服務器上的 /apiu/ 。

Answer 1

我正在嘗試提供可能有助於獲得預期結果的最佳實踐。 我會在我們排除故障時修改這個答案，並希望得到正確的答案。

所以在你的 dataServices 服務中，我想指出一些事情。 Angular 建議我們使用 httpClient 而不是 http 並警告 http 很快就會貶值。 我自己對 angular 還是很陌生，只使用過 httpClient 並且取得了很好的結果，所以我建議使用它。 我認為這意味着你被退回的承諾也被改變了。 也就是說，您必須使用.pipe方法以便在結果上使用像 map 這樣的 rxjs 運算符。 所以這就是您的 dataService 文件的樣子：

import { Injectable } from '@angular/core';
import { HttpClient } from'@angular/common/http';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { map } from 'rxjs/operators';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';

export class Series {
  Issuer_Id: number;
  Data_Id: number;
  Data_Name: string;
}


@Injectable()
export class DataService {
  constructor(private _http: HttpClient) {}

  getSeries(): Observable<Series[]> {
    return this._http.get<Series[]>("http://localhost:3000/api/")
    .pipe(
      map((res) => {
        console.log(res);
        return <Series[]> res
      })
    )
  }
}

請注意，我在不同的 rxjs/operators 中導入了地圖。 實際上，您甚至不需要管道或映射返回，因為您已經在 _http 的 get 方法中聲明了返回的類型。 HttpClient 將為您將返回值轉換為 Series[] ，因此此行： return this._http.get("http://localhost:3000/api/")會起作用。 我已經編寫了代碼，但是如何在 console.log 中記錄您獲得的回報。

在評論中，你能告訴我記錄了什么嗎？

Answer 2

我無法更正您的代碼 我正在提供我自己的設置適用於我

在 server.js 中

module.exports.SimpleMessage = 'Hello world';

現在在 App.js 中

var backend = require('./server.js');
console.log(backend.SimpleMessage); 
var data = backend.simpleMessage

在索引 html 中包含 App.js

<script src = '/App.js'></script>
alert(simpleMessage)

你應該得到“你好世界”