javascript - Angular 7 CRUD 应用服务未连接到 REST Api-6ren

javascript - Angular 7 CRUD 应用服务未连接到 REST Api

转载作者：行者123 更新时间：2023-12-03 00:48:06

我正在尝试构建一个带有 REST Api 的 Angular 7 CRUD 应用程序 this tutorial .

简单地说，它是一个经典的显示产品、添加、编辑和所有爵士乐类型的应用程序。

Rest API 是使用 Mongoose、Express 和 Node 制作的。 Angular 应用程序和服务器都各自运行良好。

当我在 cmd 中使用 mongod 时，它正在等待答案，并且在 api 中使用 npm start 时，它确实连接成功。

有关应用程序的所有内容也都可以正常运行，没有编译错误。

但是该应用程序似乎根本没有连接到 api，当我尝试将产品添加到空列表时，它只是继续加载而不再继续。

这是我拥有的服务 typescript 文件:

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
import { Product } from './products';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
const apiUrl = "/api/v1/products";

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

  constructor(private http: HttpClient) { }
  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(apiUrl)
      .pipe(
        tap(heroes => console.log('fetched products')),
        catchError(this.handleError('getProducts', []))
      );
  }

  getProduct(id: number): Observable<Product> {
    const url = `${apiUrl}/${id}`;
    return this.http.get<Product>(url).pipe(
      tap(_ => console.log(`fetched product id=${id}`)),
      catchError(this.handleError<Product>(`getProduct id=${id}`))
    );
  }

  addProduct(product): Observable<Product> {
    return this.http.post<Product>(apiUrl, product, httpOptions).pipe(
      tap((product: Product) => console.log(`added product w/ id=${product._id}`)),
      catchError(this.handleError<Product>('addProduct'))
    );
  }
  updateProduct(id, product): Observable<any> {
    const url = `${apiUrl}/${id}`;
    return this.http.put(url, product, httpOptions).pipe(
      tap(_ => console.log(`updated product id=${id}`)),
      catchError(this.handleError<any>('updateProduct'))
    );
  }

  deleteProduct(id): Observable<Product> {
    const url = `${apiUrl}/${id}`;

    return this.http.delete<Product>(url, httpOptions).pipe(
      tap(_ => console.log(`deleted product id=${id}`)),
      catchError(this.handleError<Product>('deleteProduct'))
    );
  }
}

这是 api 的 app.js 文件:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var restful = require('node-restful');
var methodOverride = require('method-override');
var cors = require('cors');

var index = require('./routes/index');
var users = require('./routes/users');
var products = require('./routes/products');
var app = express();

mongoose.Promise = global.Promise;

mongoose.connect('mongodb://localhost/product')
  .then(() =>  console.log('connection successful'))
  .catch((err) => console.error(err));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json({type:'application/vnd.api+json'}));
app.use(methodOverride());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(cors());
app.use('/', index);
app.use('/users', users);
app.use('/api/v1/products', products);

var Category = app.resource = restful.model('category', mongoose.Schema({
  cat_name: String,
}))
.methods(['get', 'post', 'put', 'delete']);

Category.register(app, '/category');

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// 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.json(err.message);
});

module.exports = app;

目前我没有任何错误报告可以分享，如果您需要代码中的更多信息，我会尽快提供。

提前致谢!

编辑:我调用服务的产品添加组件:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from '../api.service';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';

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

  productForm: FormGroup;
  prod_name: string = '';
  prod_desc: string = '';
  prod_price: number = null;
  updated_at: Date = null;
  isLoadingResults = false;

  onFormSubmit(form: NgForm) {
    this.isLoadingResults = true;
    this.api.addProduct(form)
      .subscribe(res => {
        let id = res['_id'];
        this.isLoadingResults = false;
        this.router.navigate(['/product-details', id]);
      }, (err) => {
        console.log(err);
        this.isLoadingResults = false;
      });
  }

  constructor(private router: Router, private api: ApiService, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.productForm = this.formBuilder.group({
      'prod_name': [null, Validators.required],
      'prod_desc': [null, Validators.required],
      'prod_price': [null, Validators.required],
      'updated_at': [null, Validators.required]
    });
  }

}

编辑2:在访问应用程序并且它尝试显示来自服务器的列表时，我一开始没有找到一些错误日志:

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
zone.js:2969 GET http://localhost:4200/api/v1/products 404 (Not Found)
scheduleTask    @   zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask  @   zone.js:407
onScheduleTask  @   zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask  @   zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask  @   zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @   zone.js:255
scheduleMacroTaskWithCurrentZone    @   zone.js:1114
(anonymous) @   zone.js:3001
proto.(anonymous function)  @   zone.js:1394
(anonymous) @   http.js:1630
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe  @   Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe  @   Observable.js:29
(anonymous) @   subscribeTo.js:21
subscribeToResult   @   subscribeToResult.js:11
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub  @   mergeMap.js:74
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext   @   mergeMap.js:68
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next  @   mergeMap.js:51
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next   @   Subscriber.js:54
(anonymous) @   scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe  @   Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe  @   Observable.js:29
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @   mergeMap.js:29
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe  @   Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @   filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe  @   Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call   @   map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe  @   Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/tap.js.DoOperator.call    @   tap.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe  @   Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchOperator.call  @   catchError.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe  @   Observable.js:24
push../src/app/products/products.component.ts.ProductsComponent.ngOnInit    @   products.component.ts:20
checkAndUpdateDirectiveInline   @   core.js:18668
checkAndUpdateNodeInline    @   core.js:19932
checkAndUpdateNode  @   core.js:19894
debugCheckAndUpdateNode @   core.js:20528
debugCheckDirectivesFn  @   core.js:20488
(anonymous) @   ProductsComponent_Ho…gfactory.js? [sm]:1
debugUpdateDirectives   @   core.js:20480
checkAndUpdateView  @   core.js:19876
callViewAction  @   core.js:20117
execEmbeddedViewsAction @   core.js:20080
checkAndUpdateView  @   core.js:19877
callViewAction  @   core.js:20117
execComponentViewsAction    @   core.js:20059
checkAndUpdateView  @   core.js:19882
callWithDebugContext    @   core.js:20770
debugCheckAndUpdateView @   core.js:20448
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges  @   core.js:18257
(anonymous) @   core.js:14919
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @   core.js:14919
(anonymous) @   core.js:14810
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:388
onInvoke    @   core.js:14191
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run   @   zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run  @   core.js:14105
next    @   core.js:14810
schedulerFn @   core.js:10206
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub   @   Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next   @   Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next  @   Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next   @   Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @   Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit   @   core.js:10190
checkStable @   core.js:14160
onHasTask   @   core.js:14204
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask   @   zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount  @   zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount  @   zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask   @   zone.js:205
drainMicroTaskQueue @   zone.js:595
Promise.then (async)        
scheduleMicroTask   @   zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask  @   zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask  @   zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @   zone.js:252
scheduleResolveOrReject @   zone.js:862
ZoneAwarePromise.then   @   zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @   core.js:14691
./src/main.ts   @   main.ts:12
__webpack_require__ @   bootstrap:78
0   @   main.ts:13
__webpack_require__ @   bootstrap:78
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.js:1
api.service.ts:22 
HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/v1/products", ok: false, …}
error: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta charset="utf-8">↵<title>Error</title>↵</head>↵<body>↵<pre>Cannot GET /api/v1/products</pre>↵</body>↵</html>↵"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:4200/api/v1/products: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:4200/api/v1/products"
__proto__: HttpResponseBase

也是我尝试添加新产品时得到的:

zone.js:2969 POST http://localhost:4200/api/v1/products 404 (Not Found)
scheduleTask @ zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:3001
proto.(anonymous function) @ zone.js:1394
(anonymous) @ http.js:1630
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:11
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
(anonymous) @ scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/tap.js.DoOperator.call @ tap.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchOperator.call @ catchError.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../src/app/product-add/product-add.component.ts.ProductAddComponent.onFormSubmit @ product-add.component.ts:23
(anonymous) @ ProductAddComponent.html:10
handleEvent @ core.js:19676
callWithDebugContext @ core.js:20770
debugHandleEvent @ core.js:20473
dispatchEvent @ core.js:17125
(anonymous) @ core.js:18615
schedulerFn @ core.js:10218
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:10190
push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.onSubmit @ forms.js:4647
(anonymous) @ ProductAddComponent.html:10
handleEvent @ core.js:19676
callWithDebugContext @ core.js:20770
debugHandleEvent @ core.js:20473
dispatchEvent @ core.js:17125
(anonymous) @ core.js:17572
(anonymous) @ platform-browser.js:993
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:14182
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
api.service.ts:22 HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/v1/products", ok: false, …}
(anonymous) @ api.service.ts:22
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error @ catchError.js:34
push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error @ tap.js:61
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError @ OuterSubscriber.js:13
push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error @ InnerSubscriber.js:18
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
onLoad @ http.js:1547
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:14182
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
error (async)
customScheduleGlobal @ zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask @ zone.js:258
(anonymous) @ zone.js:1831
(anonymous) @ http.js:1619
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:11
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
(anonymous) @ scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/tap.js.DoOperator.call @ tap.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchOperator.call @ catchError.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../src/app/product-add/product-add.component.ts.ProductAddComponent.onFormSubmit @ product-add.component.ts:23
(anonymous) @ ProductAddComponent.html:10
handleEvent @ core.js:19676
callWithDebugContext @ core.js:20770
debugHandleEvent @ core.js:20473
dispatchEvent @ core.js:17125
(anonymous) @ core.js:18615
schedulerFn @ core.js:10218
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:10190
push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.onSubmit @ forms.js:4647
(anonymous) @ ProductAddComponent.html:10
handleEvent @ core.js:19676
callWithDebugContext @ core.js:20770
debugHandleEvent @ core.js:20473
dispatchEvent @ core.js:17125
(anonymous) @ core.js:17572
(anonymous) @ platform-browser.js:993
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:14182
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
core.js:12632 ERROR TypeError: Cannot read property '_id' of undefined
    at SafeSubscriber._next (product-add.component.ts:24)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyNext (OuterSubscriber.js:10)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at subscribeTo.js:16
    at subscribeToResult (subscribeToResult.js:11)

还有 products.js 文件:

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Product = require('../models/Product.js');

/* GET ALL PRODUCTS */
router.get('/', function(req, res, next) {
  Product.find(function (err, products) {
    if (err) return next(err);
    res.json(products);
  });
});

/* GET SINGLE PRODUCT BY ID */
router.get('/:id', function(req, res, next) {
  Product.findById(req.params.id, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

/* SAVE PRODUCT */
router.post('/', function(req, res, next) {
  Product.create(req.body, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

/* UPDATE PRODUCT */
router.put('/:id', function(req, res, next) {
  Product.findByIdAndUpdate(req.params.id, req.body, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

/* DELETE PRODUCT */
router.delete('/:id', function(req, res, next) {
  Product.findByIdAndRemove(req.params.id, req.body, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

module.exports = router;

最佳答案

本教程尚未完成。作者遗漏了一个非常重要的部分:因为我们处于开发环境中，通常是我们的 RESTful 服务器和客户端应用程序在 localhost 下运行，但在不同的端口上。为了让它相互通信，我们需要一个简单的代理:

在根(src)文件夹中创建 proxy.conf.json 并插入以下代码:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

将“/api/*”和 RESTful 服务器端口号替换为您的“:3000”，并在启动 Angular 客户端时使用以下命令:

ng服务--proxy-config proxy.conf.json

(对于 RESTful 服务器:npm run start)

应用这些更改后，本教程的效果约为 90%!

DELETE API 不起作用，如果我没记错的话，该请求没有被 CORS 阻止，因为在我们的例子中我们已经使用了代理。 API 工作正常，因为通过 Postman，我可以删除文章。请参阅下面的控制台错误:

zone-evergreen.js:2952 DELETE http://localhost:4200/api/article/5d336729fafe194efa7fb102 500 (Internal Server Error)
api.service.ts:20 HttpErrorResponse {headers: HttpHeaders, status: 500, statusText: "Internal Server Error", url: "http://localhost:4200/api/article/5d336729fafe194efa7fb102", ok: false, …}

关于javascript - Angular 7 CRUD 应用服务未连接到 REST Api，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53161025/

文章推荐： elasticsearch - 使用logstash解析json数组字符串

文章推荐： xml - 使用 Powershell 从命名空间中选择 XML 节点

文章推荐： php - 如何删除/删除标题中的 WordPress feed url？

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Angular 7 CRUD 应用服务未连接到 REST Api

应用这些更改后，本教程的效果约为 90%!