我正在尝试使用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());
}
}
&#13;
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 { }
&#13;
我需要在nav.component.html中输入什么来查看结果?
另请注意,当我在lcoalhost:4200上刷新我的角度页面时,我可以看到GET请求正在点击3000 Express服务器上的/ apiu /。
答案 0 :(得分:0)
这不是一个答案,所以请不要忘记!! 我正在帮助提供可能有助于获得预期结果的最佳实践。我们会在排除故障时修改这个答案,并希望得出正确的答案。
因此,在您的dataServices服务中,我想指出一些事情。 Angular建议我们使用httpClient而不是http,并警告http很快就会被折旧。我是一个相当新的角度自己,只使用过httpClient并取得了很好的效果,所以我推荐使用它。我认为这意味着你被退回的承诺也会改变。也就是说,您使用.pipe
方法以便在结果上使用rxjs运算符(如map)。这就是您的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 /运算符中导入了地图。
实际上,您甚至不需要管道或映射返回,因为您已经在_http的get方法中声明了返回类型。 HttpClient会将返回值转换为Series [],因此这个内容:return this._http.get("http://localhost:3000/api/")
会起作用。我已经编写了代码,但是对于console.log来说,你得到的回报是什么。
在评论中,你能告诉我记录了什么吗?
答案 1 :(得分:0)
我无法更正您的代码我正在提供自己的设置为我工作
在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)
你应该得到'hello world'