Я хочу редактировать и показывать значение в форме, когда пользователь редактирует, но он не работает. Angular Фронтенд захватывает правильный маршрут, но данные не извлекаются из бэкэнда, и API не вызывается. Контент не отображается в браузере. Я присваиваю ссылку на репозиторий git также на тот случай, если вы захотите взглянуть https://github.com/tridibc2/blog-admin-mean. Маршрут для редактирования: http://localhost: 4200 / admin / blog и нажмите кнопку редактирования. Ниже я прилагаю edit-blog.component. html код
<h3>Edit this blog</h3>
<div class="row" style="text-align:left">
<div class="col-md-12">
<form #createBlogForm="ngForm" (ngSubmit)="editThisBlog()">
<div class="form-group">
<label>Blog Title</label>
<input type="text" name="blogTitle" [(ngModel)]="currentBlog.title" #title="ngModel" class="form-control" placeholder="Enter blog Title"
required>
</div>
<div [hidden]="title.valid || title.pristine" class="alert alert-danger">
Blog Title is required
</div>
<div class="form-group">
<label>Description</label>
<input type="text" name="blogDescription" [(ngModel)]="currentBlog.description" #description="ngModel" class="form-control" placeholder="Enter Description"
required>
</div>
<div class="form-group">
<label>Enter the blog body</label>
<textarea name="blogBodyHtml" [(ngModel)]="currentBlog.bodyHtml" #bodyHtml="ngModel" class="form-control" rows="3" required></textarea>
</div>
<div class="form-group">
<label>Category</label>
<select [(ngModel)]="currentBlog.category" #category="ngModel" name="blogCategory" class="form-control" id="category" required>
<option *ngFor="let category of possibleCategories" [value]="category">{{category}}</option>
</select>
</div>
<button type="submit" class="btn btn-default" [disabled]="!createBlogForm.form.valid">Edit the blog</button>
</form>
</div>
</div>
</div>
edit-blog.component.ts
import { ActivatedRoute, Router } from '@angular/router';
import { BlogpostService } from 'src/app/client/blogpost.service';
import { ToastsManager } from 'ng6-toastr/ng2-toastr';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-edit-blog',
templateUrl: './edit-blog.component.html',
styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {
public currentBlog;
public possibleCategories = ["Comedy", "Action", "Drama", "Technology","Cooking","Travel"];
constructor(private blogpostService: BlogpostService, private _route: ActivatedRoute, private router: Router, public toastr: ToastsManager) { }
ngOnInit() {
console.log("blogedit ngOnInIt called");
let myBlogId = this._route.snapshot.paramMap.get('blogId');
console.log(myBlogId);
this.blogpostService.getSingleBlogInformation(myBlogId).subscribe(
data =>{
console.log(data);
this.currentBlog = data;
console.log(this.currentBlog);
},
error =>{
console.log("some error occured");
console.log(error.errorMessage);
})
}
public editThisBlog(): any {
this.blogpostService.editBlog(this.currentBlog.blogId, this.currentBlog).subscribe(
data =>{
console.log(data);
this.toastr.success('Blog Edited Successfully.', 'Success!');
setTimeout(() =>{
this.router.navigate(['/blog', this.currentBlog.blogId]);
}, 1000)
},
error =>{
console.log(error);
console.log(error.errorMessage);
this.toastr.error('Some Error Occured.', 'Oops!');
}
)
}
}
сервисный код
import { catchError } from 'rxjs/operators';
import { HttpClient, HttpErrorResponse, HttpBackend, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { throwError } from 'rxjs';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
@Injectable({
providedIn: 'root'
})
export class BlogpostService {
public allBlogs;
public currentBlog;
errorData: {};
isLoggedIn = false;
public baseUrl = 'http://localhost:4000/api/v1/blogs';
constructor(private _http:HttpClient, private handler: HttpBackend) { }
public getAllBlogs(): any {
let myResponse = this._http.get(this.baseUrl + '/all').pipe(
catchError(this.handleError)
);
console.log(myResponse);
return myResponse;
}
public getSingleBlogInformation(currentBlogId): any {
let myResponse = this._http.get(this.baseUrl + '/view/' + currentBlogId).pipe(
catchError(this.handleError)
);
return myResponse;
}
public createBlog(blogData): any {
let myResponse = this._http.post(this.baseUrl + '/create', blogData);
return myResponse;
}
public deleteBlog(blogId): any {
let data = {}
let myResponse = this._http.post(this.baseUrl + '/' + blogId + '/delete', blogId);
return myResponse;
}
public editBlog(blogId, blogData): any {
let myResponse = this._http.put(this.baseUrl + '/edit' + '/' + blogId, blogData);
return myResponse;
}
public getUserInfoFromLocalStorage: any = () =>{
return JSON.parse(localStorage.getItem('userInfo'));
}
public setUserInfoInLocalStorage: any = (data) =>{
localStorage.setItem('userInfo', JSON.stringify(data))
}
public signinFunction(data): Observable<any>{
const params = new HttpParams()
.set('email', data.email)
.set('password', data.password)
return this._http.post(`${this.baseUrl}/login`, params);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
}
// return an observable with a user-facing error message
this.errorData = {
errorTitle: 'Oops! Request for document failed',
errorDesc: 'Something bad happened. Please try again later.'
};
return throwError(this.errorData);
}
}
код контроллера узла для редактирования API
BlogModel.findOne({ 'blogId': req.params.blogId }, (err, result) => {
if (err) {
console.log(err)
res.send(err)
} else if (result == undefined || result == null || result == '') {
console.log('No Blog Found')
res.send("No Blog Found")
} else {
result.views += 1;
result.save(function (err, result) {
if (err) {
console.log(err)
res.send(err)
}
else {
console.log("Blog updated successfully")
res.send(result)
}
});// end result
}
});
}
route
app.put(baseUrl+'/edit/:blogId',blogController.editBlog);
объект данных похож на это
{"title":"Blog Title 2 Custom","description":"Blog description 2 Custom","bodyHtml":"<h3>Heading of the body CUSTOM</h3><p>This is the first blog data getting uploaded n blog project</p>","views":5,"isPublished":true,"category":"tech","author":"Decardo","tags":["english movies, action movies, comedy"],"_id":"5e1120d223416207d8ae5e1b","blogId":"nbfO8hJp","created":"2020-01-04T23:33:38.000Z","lastModified":"2020-01-04T23:33:38.000Z","__v":0}