我无法使用 Angular 8 从 mongoDB 加载数据

Question

我无法使用Angular 8从MongoDB加载数据。

我已经用 https://jsonplaceholder.typicode.com/做到了，它正在工作，但在本地"http://localhost:3000/employees"它没有。

我发布数据，但我不能如何解决这个问题，请!!

仪表板服务文件：

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Employee } from '../models/Employee.model';
import {Observable} from 'rxjs';
@Injectable()
export class DashboardService {
//Url get data
serviceUrl : string = 'http://localhost:3000/api/employees';
constructor(private http: HttpClient){}
//get Employees
getEmployee(): Observable<Employee[]> {
return this.http.get<Employee[]>(this.serviceUrl);
}
}

组件文件：

import { Component, OnInit} from '@angular/core';
import { DashboardService } from '../services/dashboard.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor(private dashboardService : DashboardService){}
Employee :any = [];
ngOnInit() {
this.dashboardService.getEmployee()
.subscribe(data => this.Employee = data)
console.log(this.dashboardService)
}
}

服务器端 ：

const express = require ('express');    
const router = express.Router();    
const Employee = require ('../models/employee');
router.get('/employees', async (req, res)=>{
try {
let employees = await Employee.find();
res.status(200).json({
employees : employees
});
} catch (err) {
res.status(500).json({
message: err.message
})
}
});

服务器端 ：

const express = require('express');
const mongoose = require ('mongoose');
const dotenv = require ('dotenv');
const bodyParser = require('body-parser');
const cors = require ('cors');

dotenv.config();
const app = express();
mongoose.connect(process.env.DATABASE,
{ useNewUrlParser: true, useUnifiedTopology: true,
useFindAndModify: true, useCreateIndex: true }, err =>{
if (err) {
console.log(err)
}else{
console.log('Connected to the DataBase.....')
}
});

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use((req, res, next) =>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Header', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE, PUT, OPTIONS');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
const routesAdmin = require ('./routes/admin');
const routesAnswer = require ('./routes/answers');
const routesEmployee = require ('./routes/employee');
const routesSala = require ('./routes/sala');
const routesTavolo = require ('./routes/tavolo');

app.use('/api', routesAdmin);
app.use('/api', routesAnswer);
app.use('/api', routesEmployee);
app.use('/api', routesSala);
app.use('/api', routesTavolo);

app.listen(process.env.PORT, err => {
if (err) {
console.log(err)
}else{
console.log('Server is running..', process.env.PORT);
}
});

Answer 1

您在此处对所有路由使用相同的路由网址"/api"：

app.use('/api', routesAdmin);
app.use('/api', routesAnswer);
app.use('/api', routesEmployee);
app.use('/api', routesSala);
app.use('/api', routesTavolo);

您需要在索引中使用不同的 url.js以便路由可以按预期工作：

app.use('/api/admins', routesAdmin);
app.use('/api/answers', routesAnswer);
app.use('/api/employees', routesEmployee);
app.use('/api/sala', routesSala);
app.use('/api/tavolo', routesTavolo);

在您的员工路由器(以及其他路由(中，您无需将员工添加到 url：

router.get('/', async (req, res)=>{ ...

现在，当您向此 url 发送 GET 请求时，您需要能够获取数据http://localhost:3000/api/employees

我建议您先使用邮递员测试api，然后在看到它正常工作后，继续集成到react应用程序。

还可以像这样更改您的 DashboarService 定义：

@Injectable({
providedIn: 'root',
})
export class DashboardService {
//Url get data
serviceUrl : string = 'http://localhost:3000/api/employees';
constructor(private http: HttpClient){}
//get Employees
getEmployee(): Observable<Employee[]> {
return this.http.get<Employee[]>(this.serviceUrl);
}
}

并在组件中添加此错误情况：

import { Component, OnInit } from "@angular/core";
import { DashboardService } from "../services/dashboard.service";
@Component({
selector: "app-dashboard",
templateUrl: "./dashboard.component.html",
styleUrls: ["./dashboard.component.css"]
})
export class DashboardComponent implements OnInit {
constructor(private dashboardService: DashboardService) {}
Employee: any = [];
ngOnInit() {
this.dashboardService.getEmployee().subscribe(
data => {
console.log("Data: ", data);
this.Employee = data;
},
err => {
console.log("Error: ", err);
}
);
}
}

Answer 2

这里的问题是你从服务器端返回所有员工，并且你已经把它包装到另一个叫做"employees"的变量中。

let employees = await Employee.find();
res.status(200).json({
employees : employees
});

从你棱角分明的一面，你只是在寻找员工的对象。因此，请按如下所示修改代码，

res.status(200).json(employees);