javascript - 如何从 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 前端？

我已经学习了几个小时的教程，这就是我想出的:

nav.component.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);
}
}

data.service.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 并且取得了很好的效果，所以我建议使用它。我认为这意味着您返回的 promise 也发生了变化。也就是说，您必须使用 .pipe 方法才能在结果上使用像 map 这样的 rxjs 运算符。所以这就是您的数据服务文件的样子:

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 中导入了 map 。实际上，您甚至不需要管道或映射返回值，因为您已经在 _http 的 get 方法中声明了返回值的类型。 HttpClient 会为您将返回值转换为 Series[]，因此下面的代码:return this._http.get("http://localhost:3000/api/") 会起作用。我已经将代码编写为 console.log 您获得的返回。

在评论中，你能告诉我记录了什么吗？