#angular
Вопрос:
Я пытаюсь выполнять операции CRUD, и все работает, кроме функции обновления, за которой я следил https://www.youtube.com/watch?v=fhRdqbEXp9Y но изменил названия вещей, чтобы они соответствовали приложению, которое я пишу. У меня нет никаких ошибок, но он не обновит форму или не обновит запись, которая уже существует в базе данных Mongo.
персона.компонент.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { PersonService } from '../shared/person.service';
import { Person } from '../shared/person.model';
declare var M: any;
@Component({
selector: 'app-person',
templateUrl: './person.component.html',
styleUrls: ['./person.component.css'],
providers: [PersonService]
})
export class PersonComponent implements OnInit {
constructor(public personService: PersonService) { }
ngOnInit() {
this.resetForm();
this.refreshPersonList();
}
resetForm(form?: NgForm) {
if (form)
form.reset();
this.personService.selectedPerson = {
_id: "",
address: "",
city: "",
state: "",
zip: "",
numPersons: null,
year: null,
taker: ""
}
}
onSubmit(form: NgForm) {
if (form.value._id == "") {
this.personService.postPerson(form.value).subscribe((res) => {
this.resetForm(form);
this.refreshPersonList();
M.toast({ html: 'Saved successfully', classes: 'rounded' });
});
}
else {
this.personService.putPerson(form.value).subscribe((res) => {
this.resetForm(form);
this.refreshPersonList();
M.toast({ html: 'Updated successfully', classes: 'rounded' });
});
}
}
refreshPersonList() {
this.personService.getPersonList().subscribe((res) => {
this.personService.persons = res as Person[];
});
}
onEdit(per : Person){
this.personService.selectedPerson = per;
}
onDelete(_id: string, form: NgForm){
if (confirm('Are you sure you want to delet this record?') == true) {
this.personService.deletePerson(_id).subscribe((res) => {
this.refreshPersonList();
this.resetForm();
M.toast({html:'Deleted successfully', classes: 'rounded'});
});
}
}
}
##person.service.ts##
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { Person } from './person.model';
@Injectable({
providedIn: 'root'
})
export class PersonService {
selectedPerson: Person;
persons: Person[];
readonly baseURL = 'http://localhost:3000/persons';
constructor(private http : HttpClient) { }
postPerson(per : Person){
return this.http.post(this.baseURL, per);
}
getPersonList(){
return this.http.get(this.baseURL);
}
putPerson(per: Person) {
return this.http.put(this.baseURL `/${per._id}`, per);
}
deletePerson(_id: string) {
return this.http.delete(this.baseURL `/${_id}`);
}
}
###person.component.html###
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content white-text">
<div class="row">
<div class="col s5">
<form #personForm="ngForm" (ngSubmit)="onSubmit(personForm)">
<input type="hidden" name="_id" #_id="ngModel" [(ngModel)]="personService.selectedPerson._id">
<div class="row">
<div class="input-field col s12">
<input type="text" name="address" #name="ngModel" [(ngModel)]="personService.selectedPerson.address" placeholder="Enter an Address">
<label>Address :</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" name="city" #name="ngModel" [(ngModel)]="personService.selectedPerson.city" placeholder="Enter your City">
<label>City :</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" name="state" #name="ngModel" [(ngModel)]="personService.selectedPerson.state" placeholder="Enter your State Code">
<label>State :</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" name="zip" #name="ngModel" [(ngModel)]="personService.selectedPerson.zip" placeholder="Enter your Zip-Code">
<label>Zip-Code :</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" name="numPersons" #name="ngModel" [(ngModel)]="personService.selectedPerson.numPersons" placeholder="Enter the number of People living at the address">
<label>Number of People at Address :</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" name="year" #name="ngModel" [(ngModel)]="personService.selectedPerson.year" placeholder="Year Census was taken">
<label>year :</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" name="taker" #name="ngModel" [(ngModel)]="personService.selectedPerson.taker" required placeholder="Who took the Census?">
<label>Census Taker :</label>
</div>
</div>
<div class="row">
<div class="imput-field col s12">
<button class="btn btn-custom right" type="button" (click)="resetForm(personForm)">Reset</button>
<button class="btn bth-custom right" type="submit" [disabled]="!personForm.valid">Submit</button>
</div>
</div>
</form>
</div>
<div class="col s7">
<table class="responsive-table highlight">
<thead>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip-Code</th>
<th>Number of People at Address</th>
<th>Year</th>
<th>Census Taker</th>
<th></th>
</thead>
<tr *ngFor="let per of personService.persons">
<td>{{per.address}}</td>
<td>{{per.city}}</td>
<td>{{per.state}}</td>
<td>{{per.zip}}</td>
<td>{{per.numPersons}}</td>
<td>{{per.year}}</td>
<td>{{per.taker}}</td>
<td>
<a class="action-btn">
<i class="material-icons" (click)="onEdit(per)">edit</i>
</a>
<a class="action-btn">
<i class="material-icons" (click)="onDelete(per._id,personForm)">delete</i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Ответ №1:
Ошибка заключалась в том, что NodeJS/controllers/personController.js
const express = require('express');
var router = express.Router();
var ObjectId = require('mongoose').Types.ObjectId;
var { Person } = require('../models/person');
// => localhost:3000/persons/
router.get('/', (req, res) => {
Person.find((err, docs) => {
if (!err) {res.send(docs); }
else { console.log('Error in Retriving Persons : ' JSON.stringify(err, undefined, 2)); }
});
});
router.get('/:id', (req, res) => {
if (!ObjectId.isValid(req.params.id))
return res.status(400).send(`No record with given id : ${req.params.id}`);
Person.findById(req.params.id, (err, doc) => {
if (!err) {res.setDefaultEncoding(doc);}
else {console.log('Error in Retriving Person: ' JSON.stringify(err, undefined, 2));}
});
});
router.post('/', (req, res) => {
var per = new Person({
address: req.body.address,
city: req.body.city,
state: req.body.state,
zip: req.body.zip,
numPersons: req.body.numPersons,
year: req.body.year,
taker: req.body.taker,
});
per.save((err, doc) => {
if (!err) {res.send(doc);}
else {console.log('Error in Person Save :' JSON.stringify(err, undefined, 2));}
});
});
router.put('/:id', (req, res) => {
if (!ObjectId.isValid(req.params.id))
return res.status(400).send(`No record with given id : ${req.params.id}`);
var per = {
address: req.body.address,
city: req.body.city,
state: req.body.state,
zip: req.body.zip,
numPersons: req.body.numPersons,
year: req.body.year,
taker: req.body.taker,
};
Person.findByIdAndUpdate(req.params.id, {$set: per}, {new: true}, (err, doc) => {
if (!err) {res.send(doc);}
else {console.log('Error in Person Update: ' JSON.stringify(err, undefined, 2));}
});
});
router.delete('/:id', (req, res) => {
if (!ObjectId.isValid(req.params.id))
return res.status(400).send(`No record with given id : ${req.params.id}`);
Person.findByIdAndRemove(req.params.id, (err, doc) => {
if (!err) {res.send(doc);}
else {console.log('Error in Person Delete: ' JSON.stringify(err, undefined, 2));}
});
});
module.exports = router ;
В router.put у меня был Person.findByIdAndUpdate со строчной буквой p, поэтому person не был определен, где находится Человек.