html - Delete data from the database
问题描述
Im trying to delete data from a database in angular, This is the method i've written so far.
deleteReview(review){
this.http.delete('http://localhost:5000/api/v1.0/books/' +
this.bookID + '/reviews').subscribe(
response => {data => {
console.log(data)
}}
)
}This is the method i used to post data to the database:
postReview(review) {
let postData = new FormData();
postData.append("username", review.name);
postData.append("text", review.review);
postData.append("stars", review.stars);
postData.append("votes", review.votes);
let today = new Date();
let todayDate = today.getFullYear() + "-" +
today.getMonth() + "-" +
today.getDate();
postData.append("date", todayDate);
this.http.post('http://localhost:5000/api/v1.0/books/' +
this.bookID + '/reviews',
postData).subscribe(
response => {
this.getReviews(this.bookID);
}
);
}Function to delete review in backend python application:
# Delete a review @app.route("/api/v1.0/books/<string:book_id>/reviews/<string:review_id>", methods=["DELETE"])
def delete_review(book_id, review_id):
books.update_one( { "_id" : ObjectId(book_id) }, { "$pull" : { "reviews" : { "_id" : ObjectId(review_id) } } } )
return make_response( jsonify( { } ), 204) im receiving this error after clicking the button on the frontend
ERROR TypeError: ctx_r8.deleteReview is not a function
book.component.html where deleteReview() is being called:
<div class="container" style="margin-top: 100px;">
<div class="row">
<div class="col-sm-10 mx-auto">
<div *ngFor="let book of webService.book | async">
<div class="card text-white bg-secondary mb-3">
<div class="class card-header">
<strong>{{book.title}}</strong> by <strong>{{book.author}}</strong>
</div>
<div class="card-body">
{{book.imageLink}}
</div>
<div class="card-body">
<strong>Country of Origin: </strong>{{book.country}} <br>
<strong>Year Released: </strong>{{book.year}} <br>
<strong>Language: </strong>{{book.language}} <br>
<strong>Pages: </strong>{{book.pages}}
</div>
<div class="card-footer">
<strong>{{book.review_count}}</strong>
review(s) available <br>
</div>
</div>
</div>
</div> <!-- Col -->
</div> <!-- Row -->
</div> <!-- Container -->
<div class="container" style="margin-top: 30px; margin-bottom: 30px">
<div class="row">
<div class="col-sm-10 mx-auto">
<div class="card bg-light mx-auto" *ngFor="let review of webService.reviews_list | async">
<div class="card-header">
<strong>Review by</strong> {{ review.username}}
on <strong>{{ review.date | date}}</strong>
</div>
<div class="card-body">
{{ review.text }}
<hr>
<p>
<strong>
Votes:
</strong>
{{ review.votes.funny }} funny,
{{ review.votes.useful }} useful,
</p>
</div>
<div class="card-footer">
<strong>{{ review.stars }} stars</strong>
<div class="col-sm-13 text-right">
<button *ngIf="authService.loggedIn" type="submit" class="btn-dark text-rght" style="margin-right: 10px;">
Edit Review
</button>
<button *ngIf="authService.loggedIn" (click)="deleteReview()" class="btn-dark text-rght">
Delete Review
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="authService.loggedIn" class="container" style="margin-bottom: 30px;">
<div class="row">
<div class="col-sm-10 mx-auto">
<div class="card bg-light mx-auto">
<div class="card-header">
<h4>
Please Review This Business
</h4>
</div>
<div class="card-body">
<form [formGroup]='reviewForm' (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="name"><strong>Name</strong></label>
<input type="text" id="name" name="name" class="form-control" formControlName="name"
[ngClass]="{ 'error' : isInvalid('name') }">
</div>
<div class="form-group">
<label for="review"><strong>Please leave your review below</strong></label>
<textarea id="review" name="review" rows="3" class="form-control" formControlName="review"
[ngClass]="{ 'error' : isInvalid('review') }">
</textarea>
</div>
<div class="form-group">
<label for="stars"><strong>Please provide a rating (5 = Best)</strong></label>
<select id="stars" name="stars" class="form-control" formControlName="stars">
<option value="1">1 Star</option>
<option value="2">2 Stars</option>
<option value="3">3 Stars</option>
<option value="4">4 Stars</option>
<option value="5">5 Stars</option>
</select>
</div>
<div class="row">
<div class="col-sm-10 mx-auto">
<div class="row">
<div class="form-group col-sm-6 mx-auto">
<label for="funny"><strong>Was this review funny?</strong></label>
<select id="funny" name="funny" class="form-control" formControlName="funny">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-sm-6 mx-auto">
<label for="useful"><strong>Was this review useful?</strong></label>
<select id="useful" name="useful" class="form-control" formControlName="useful">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
</div>
<span *ngIf="isIncomplete()">
You must complete all fields*
</span>
<div class="col-sm-13 text-right">
<button *ngIf="!isIncomplete()" type="submit" class="btn-dark text-rght">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container" *ngIf="!authService.loggedIn" style="margin-bottom: 20px;">
<div class="row">
<div class="col-sm-10 mx-auto">
<div class="card bg-light mx-auto">
<div class="card-body">
Please login to review this business
</div>
</div>
</div>
</div>
</div>webservices typescript file:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class WebService {
public book_private_list;
private booksSubject = new Subject();
book_list = this.booksSubject.asObservable();
public book_private;
private bookSubject = new Subject();
book = this.bookSubject.asObservable();
public reviews_private_list;
private reviewsSubject = new Subject();
reviews_list = this.reviewsSubject.asObservable();
bookID;
reviewID;
constructor(private http: HttpClient) {
}
getBooks(page) {
return this.http.get('http://localhost:5000/api/v1.0/books?pn=' + page)
.subscribe(response => {
this.book_private_list = response;
this.booksSubject.next(this.book_private_list);
})
}
getBook(id) {
return this.http.get('http://localhost:5000/api/v1.0/books/' + id)
.subscribe(response => {
this.book_private = [response];
this.bookSubject.next(this.book_private);
this.bookID = id;
})
}
getReviews(id) {
return this.http.get('http://localhost:5000/api/v1.0/books/' + id + '/reviews')
.subscribe(response => {
this.reviews_private_list = response;
this.reviewsSubject.next(this.reviews_private_list);
this.reviewID = id;
})
}
postReview(review) {
let postData = new FormData();
postData.append("username", review.name);
postData.append("text", review.review);
postData.append("stars", review.stars);
postData.append("votes", review.votes);
let today = new Date();
let todayDate = today.getFullYear() + "-" +
today.getMonth() + "-" +
today.getDate();
postData.append("date", todayDate);
this.http.post('http://localhost:5000/api/v1.0/books/' +
this.bookID + '/reviews',
postData).subscribe(
response => {
this.getReviews(this.bookID);
}
);
}
deleteReview(reviewID){
this.http.delete('http://localhost:5000/api/v1.0/books/' +
this.bookID + '/reviews/' + this.reviewID).subscribe(
response => {
console.log(response);
//this.getReviews(this.bookID);
}
)
}
}book.component.ts:
import { Component } from '@angular/core';
import { WebService } from './web.service';
import { ActivatedRoute } from '@angular/router';
import { FormBuilder } from '@angular/forms';
import { AuthService } from './auth.service';
@Component({
selector: 'book',
templateUrl: './book.component.html',
styleUrls: ['./book.component.css']
})
export class BookComponent {
reviewForm;
constructor(public webService: WebService,
private route: ActivatedRoute,
private FormBuilder: FormBuilder,
public authService: AuthService) {
this.reviewForm = FormBuilder.group({
name: '',
review: '',
stars: 5,
funny: 5,
useful: 5
})
}
ngOnInit() {
this.webService.getBook(this.route.snapshot.params.id);
this.webService.getReviews(this.route.snapshot.params.id);
}
onSubmit(){
//console.log(this.reviewForm.value);
this.webService.postReview(this.reviewForm.value);
this.reviewForm.reset();
}
isInvalid(control){
return this.reviewForm.controls[control].invalid &&
this.reviewForm.controls[control].touched;
}
isUntouched(){
return this.reviewForm.controls.name.pristine ||
this.reviewForm.controls.review.pristine;
}
isIncomplete(){
return this.isInvalid('name') ||
this.isInvalid('review') ||
this.isUntouched();
}
}解决方案
推荐阅读
- python - BeautifulSoup - 如何在美丽的汤中获得第二个下一个项目？
- cucumber - 黄瓜特征文件中应该给出多少数据？
- node.js - 当依赖版本不同步时如何对齐 package.json 和 package-lock.json？
- eclipse - 用 kotlin dsl 编写的自定义 gradle 脚本插件导致错误
- scala - 如何使用 spark/scala 检查是否存在大查询表
- ios - 当我使用此错误更新我的电话 IOS 时，IOS 应用程序无法正常工作
- json - 使用条件关键字的 JSON Schema 交叉键约束支持
- python - 我还能用什么来代替python中的elif、if、else语句？
- microcontroller - wifi模块中应用处理器的目的是什么？
- python-3.x - For 循环 - 缩进问题。需要重新安排