Question

我在使用卑鄙的应用程序时遇到了麻烦。我试图将后端（Nodejs，Expressjs）连接到前端（Angular 6）。但是有一些问题。

对于后端，端口为http://localhost:3000，并且

在保存用户时，我的组件文件不起作用，因为没有生成 Toastr消息，也没有将路由器导航到登录页面，并且表单为重置。

这是我的组件文件sign-up.component.html

<form class="form-style-9" 
      [formGroup]="userForm"
      (ngSubmit)= "registerUser(userForm.value)" >
<ul>
<li><span>Name</span>
    <input type="text" name="name" class="field-style field-full align-none" placeholder="Name" formControlName="name" />
</li>
    <li><span>Email Id</span>
    <input type="email" name="email" class="field-style field-full align-none" placeholder="Email" formControlName="email"/>
    </li>
    <li><span>Password</span>
     <input type="password" name="password" class="field-style field-full align-none" placeholder="Password" formControlName="password"/>
    </li>
<li><span>Phone No</span>
    <input type="text" name="phone" class="field-style field-full align-none" placeholder="Phone" formControlName="phoneNo" />
   
</li>
<li><span>Address</span>
<textarea name="address" class="field-style" placeholder="Address" formControlName="address"></textarea>
</li>
<li>
<input type="submit" value="Sign Up" />
</li>
    <li align="right">
    <a routerLink="/userlogin">Back to Sign In</a>
        </li>
</ul>
</form>

sign-up.component.ts我认为该文件不起作用。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators, AbstractControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { UserService } from '../user.service';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent implements OnInit {

  constructor(private fb: FormBuilder,
    private toastr: ToastrService,
    private userService: UserService,
    private router: Router) { }
  
  userForm;
  
  ngOnInit() {
    this.userForm =  new FormGroup ({
        name: new FormControl(""),
        email: new FormControl(""),
        password: new FormControl(""),
        phoneNo: new FormControl(""),
        address: new FormControl("")
    });
  }
  
   registerUser(formdata:any): void {
   let theForm = this.userForm.value;
      this.userService.addUser(theForm).subscribe(data => {
          if (data.success === false) {
            this.toastr.error(data.message);
          } else {
          console.log("hello");
            this.toastr.success(data.message);
            this.router.navigate(['/userlogin']);
          }
          this.userForm.reset();
      });
    }
}

user.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private _http: Http) { }
  
  addUser(oUser) {
        let headers = new Headers ({ 'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});
        return this._http.post('http://localhost:3000/sign-up', JSON.stringify(oUser), options).pipe(
            map((response: Response) => response.json()));
  }
}

这是我的路线文件夹api.js

var express = require('express');
var router = express.Router();
const mongoose = require('mongoose');
const User = require('../models/users');

const db = 'mongodb://localhost:27017/meanshopapp';
mongoose.connect(db, function(err){
    console.log("mongo connection done");
    if(err){
        console.log("Error.."+err);
    }
});

router.get('/', (req, res)=>{
    console.log("get api ");
    User.find({}, function(err, users) {
    if (err) throw err;

  // object of all the users
   console.log(users);
  });
    res.send(users);
});

function signup(req, res, next){
    console.log("new user entered");

    var newUser = new User(req.body);

    newUser.save(function(err){
        if(err){
            console.log("error saving user");
        }
        else{
            console.log("user inserted");
           
        }
    })
};

module.exports = {router, signup};

用户数据存储在db中，但组件文件不起作用。

Answer 1

您发送了请求，但没有响应...在signup函数中添加响应，然后重试。

顺便说一句，我更喜欢将路由器包装到一个模块中并将其导入到app.js中的方法。

此外，无需为registerUser函数分配参数，并且在注入时可以使用FormBuilder ...

平均值应用：将数据保存到mongodb时，前端组件不起作用

1 个答案: