Связь Angular 6 между компонентом и сервисом

http: // локальный: 4000 / список выдает ошибку «Невозможно получить / список». Как я могу это исправить? Я думаю, проблема в том, что list.component не взаимодействует с issue.service. Использование angular 6 и http: // localhost: 4000 / вопросы дает правильные данные json из mongodb.

Нужны очень подробные ответы, потому что я пишу код впервые.

list.component.ts:

import { Component, OnInit } from '@angular/core';
import { IssueService } from '../../issue.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  constructor(private issueService: IssueService) { }

  ngOnInit() {
    this.issueService.getIssues().subscribe((issues) => {
      console.info(issues);
    });
  }

}

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'frontend';
}

issue.service.ts:

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

@Injectable({
  providedIn: 'root'
})
export class IssueService {

  url = 'http://localhost:4000';

  constructor(private http: HttpClient) { }

  getIssues() {
    return this.http.get(`${this.url}/issues`);
  }

  getIssueById(id) {
    return this.http.get(`${this.url}/issues/${id}`);
  }

  addIssue(title, responsible, description, severity) {
    const issue = {
      title: title,
      responsible: responsible,
      description: description,
      severity: severity
    };
    return this.http.post(`${this.url}/issues/add`, issue);
  }

  updateIssue(id, title, responsible, description, severity, status) {
    const issue = {
      title: title,
      responsible: responsible,
      description: description,
      severity: severity,
      status: status
    };
    return this.http.post(`${this.url}/issues/update/${id}`, issue);
  }

  deleteIssue(id) {
    return this.http.get(`${this.url}/issues/delete/${id}`);
  }
}

issue.js:

const mongoose = require('mongoose');

const issueSchema = new mongoose.Schema({
    title: {
        type: String
    },
    responsible: {
        type: String
    },
    description: {
        type: String
    },
    severity: {
        type: String
    },
    status: {
        type: String,
        default: 'Open'
    }
});

module.exports = mongoose.model('Issue', issueSchema, 'Issues');

server.js:

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

const Issue = require('./models/issue.js');

const app = express();
const router = express.Router();

app.use(cors());
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/issues');

const connection = mongoose.connection;

connection.once('open', () => {
    console.info('MongoDB database connection established successfully!');
});

app.get("/issues", function(req, res) {
    Issue.find({})
    .exec(function (err, issues) {
        if (err)
            console.info(err);
        else
            res.json(issues);
    });
});

app.get("/issues/:id", function(req, res) {
    Issue.findById(req.params.id, function(err, issue) {
        if (err) {
            console.info(err);
        } else {
            res.json(issue);
        }
    });
});

app.post("/issues/add", function(req, res) {
    var newIssue = new Issue(req.body);
    newIssue.save()
    .then(item => {
        res.send("item saved");
    }).catch(err => {
        res.status(400).send("failed to save");
    });
});

app.put("/issues/update/:id", function(req, res) {
    Issue.findById(req.params.id, (err, issue) => {
        if (!issue) 
            return next(new Error("could not find ID"));
        else {
            issue.title = req.body.title;
            issue.responsible = req.body.responsible;
            issue.description = req.body.description;
            issue.severity = req.body.severity;
            issue.status = req.body.status;

            issue.save()
            .then(item => {
                res.send("item updated");
            }).catch(err => {
                res.status(400).send("failed to update");
            });
        };
    });
});

app.delete("/issues/delete/:id", function(req, res) {
    Issue.findByIdAndRemove({_id: req.params.id}, (err, issue) => {
        if (err)
            res.json(err);
        else
            res.json('Removed successfully');
    })
});

app.use('/', router);

app.listen(4000, () => console.info('Express server running on port 4000'));

Похоже, у вас нет маршрута с названием / list

danday74 27.09.2018 03:16

Стоит ли добавлять маршрут в файл server.js?

stackbeats 27.09.2018 04:22

файл маршрутов обычно называется app.routes.ts или что-то подобное - его содержимое должно выглядеть примерно так ... {путь: 'issues', component: IssuesComponent,

danday74 27.09.2018 04:25
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
3
64
0

Другие вопросы по теме