数据仅在刷新后显示 [英] Data only displayed after refresh
问题描述
我正在我的应用程序中创建评论部分,当用户输入评论并提交时,评论应立即显示在前端,不幸的是,现在只有在刷新后才能看到评论,
I am creating comments section in my app, when a user enter a comments and submit, comment should imeaditely be displayed in front end, unfortunately now comments are only visible after refresh,
这就是我所拥有的:
显示评论
component.ts
component.ts
ngOnInit() {
this.activeRouter.params.subscribe((params) => {
// tslint:disable-next-line:prefer-const
let id = params['id'];
this.moviesService.getComments(id)
.subscribe(comments => {
console.log(comments);
this.comments = comments;
});
});
}
service.ts
service.ts
getComments(id: string): Observable<any> {
const url = `${apiUrl + this.commentsUrl}/${id}`;
return this.http.get(url, httpOptions).pipe(
map(this.extractData),
catchError(this.handleError));
}
HTML
<div *ngFor="let comment of comments" class="col-md-7">
<ul class="list-group">
<li class="list-group-item">Author: {{comment.author}}</li>
<li class="list-group-item">Comments: {{comment.description}}</li>
</ul>
<br>
</div>
**
添加评论:
Adding comments:
** service.ts
** service.ts
// Adds comments
addReview(author, description) {
const uri = 'http://localhost:8000/movies/comments';
const obj = {
author: author,
description: description
};
return this.http.post(uri, obj);
}
compo.ts
createForm() {
this.angForm = this.fb.group({
author: ['', Validators.required],
description: ['', Validators.required]
});
}
addReview(author, description) {
this.moviesService.addReview(author, description).subscribe(success => {
this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
}, error => {
this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
});
}
HTML
<div class="col-md-7 movie-form" >
<flash-messages></flash-messages>
<form [formGroup]="angForm" novalidate>
<div class="form-group">
<label class="col-md-4">Author</label>
<input type="text" class="form-control" name="author" formControlName="author" #author />
</div>
<div *ngIf="angForm.controls['author'].invalid && (angForm.controls['author'].dirty || angForm.controls['author'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['author'].errors.required">
Name is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">Description</label>
<textarea cols="10" rows="10" type="text" class="form-control" formControlName="description" #description>
</textarea>
</div>
<div *ngIf="angForm.controls['description'].invalid && (angForm.controls['description'].dirty || angForm.controls['description'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['description'].errors.required">
description is required.
</div>
</div>
<div class="form-group">
<button (click)="addReview(author.value, description.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
</div>
</form>
</div>
问题
Question
我的代码是什么?任何帮助建议都会被重视
what is wrog with my code? any help suggestion will be apreciated
推荐答案
您必须在提交评论的回调中调用getComments
方法.您的代码在组件的ngOnInit
方法中仅具有获取"调用.因此,当刷新视图时,ngOnInit
会再次执行,从而调用getComments
.
You have to call your getComments
method in the callback of you submit comments. Your code only has a "get" call in ngOnInit
method of the component. So when you refresh your view, the ngOnInit
executes again and thus getComments
is called.
您必须在您的Submit comments方法的回调中进行一次get调用.
You have to make a get call in the callback of your submit comments method.
EDIT#1:
addReview(author, description) {
this.moviesService.addReview(author, description).subscribe(success => {
this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
// get the id
this.moviesService.getComments(id).subscribe(comments => {
console.log(comments);
this.comments = comments;
});
}, error => {
this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
});
}
这篇关于数据仅在刷新后显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!