![](/img/trans.png)
[英]How do I display variables passed from Express in an Angular template?
[英]How do I get data to display in Angular from API in Express?
我正在尝试使用 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/ 。
我正在尝试提供可能有助于获得预期结果的最佳实践。 我会在我们排除故障时修改这个答案,并希望得到正确的答案。
所以在你的 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 中记录您获得的回报。
在评论中,你能告诉我记录了什么吗?
我无法更正您的代码 我正在提供我自己的设置适用于我
在 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)
你应该得到“你好世界”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.