Вызов данных в Angular FrontEnd из Node.js BackEnd - PullRequest
Новая
       0

Вызов данных в Angular FrontEnd из Node.js BackEnd

0 голосов
/ 01 октября 2018

У меня есть внутренний код node.js, вызывающий базу данных, и мне нужно отобразить эти данные на моем угловом конце.

Это мой внутренний код: 

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");

//Own Imports
var cosmosDB = require("./utils/azure-cosmos");
var dataLake = require("./utils/azure-datalake");

var app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get("env") === "development" ? err : {};

// render the error page
res.status(err.status || 500);
res.render("error");
});

//Our code starts here
function main() {

//Cosmos Functions
//Gets all devices from cosmos
cosmosDB.findAll("devices", function(docs) {
console.log("Docs found: ", docs);
});

//Gets one device by filter
cosmosDB.findOne("5b4b8d63d08bb1fa920b5f40", "devices", function(docs) 
{
console.log("Doc found find one: ", docs);
});

//Datalake Functions
//Gives you the statuses off all the files in datalake
dataLake.findAll(function(docs) {
console.log("All statuses from datalake: ", docs);
});

//Opens a file with the given name
dataLake.open("5ae6d8e3e892cb63994509fa_1538040038280.json", 
function(doc) {
console.log("Doc requested to be opened: ", doc);
});
}

main();

// app.listen(3000)
console.log("App running on port 3000");

module.exports = app;

Я создал api.service.ts на своем интерфейсе, но я явно что-то упустил!Вот как это выглядит в данный момент: 

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';


@Injectable()
export class ApiService {

devices = [];

constructor(private http: Http) {}

getDevices() {
this.http.get('http://localhost:3000/devices').subscribe(res => {
  this.devices = res.json();
});
}

Как я могу правильно реализовать это, чтобы я мог использовать данные в своем внешнем проекте?

Спасибо

1 Ответ

0 голосов
/ 01 октября 2018

Я думаю, что вы должны импортировать HttpClient, а не Http.Попробуйте это: 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class ApiService {

devices: any;

constructor(private http:HttpClient) {}

getDevices() {
this.http.get('http://localhost:3000/devices')
    .map(res => res)
    .subscribe(result => this.devices = result);
}

Это должно работать нормально, попробуйте.

Вы также можете определить свою собственную структуру ответа, и вы отправляете и используете его, так что вам не придетсяиспользуйте функцию карты, вы получите ответ непосредственно в этом формате.например: 

export interface Result {
    x: string;
    y: string[];
    ...
}

и используйте его как 

getDevices(): Observable<Result>{
   this.http.get<Result>('http://localhost:3000/devices')
    .subscribe(result => this.devices = result);

См. также следующие вопросы об стеке потока:

Angular - res.json () не является функцией

Angular2 http.get (), map (), subscribe () и наблюдаемый шаблон - базовое понимание

...