angular data not update after navigate

So I am using angular6 to create a post system. The problem is when I created post successfully and navigate back to the dashboard, the service triggered in ngOnInit of dashboard fetched all posts except for the latest created one.
I made sure that the navigation is triggered after the success of creating the post, and if I refresh the page it will show the new post.

//this is the post creating method in edit component
createArticle(){
const content = this.contentInput.nativeElement.value;
this.articleService.create(content, this.uris).then(res =>
//create article success
this.router.navigateByUrl('/dashboard');
, err =>
console.log(err);
this.router.navigateByUrl('/dashboard');
);

//this is part of dashboard component which should show posts
ngOnInit()
this.load() //cannot get the newest post
//setTimeout(()=>this.load(),100) --> this is a workaround




load()
this.article.getAll().subscribe(
res =>
if(res instanceof HttpResponse)
console.log(res.body)
this.handleArticles(res.body) //show every post except for the lastest one



,
err => console.log(err)
)



//in the create method in article.service.ts
return new Promise((resolve,reject) =>
this.auth.me(header).subscribe((res:UserResponse) =>
console.log(res)
user_id = res.id;
name = res.name;
this.reqForCreate(content, uris, user_id, name)
.subscribe((e: HttpResponse<any>)=>

resolve();

, err=>reject(err));
,
err => reject(err))
)


//back end code in the article controller
public function create(Request $request)string

public function getAll()
return response(Article::all(), 200);


Above is part of the code. I searched for a while but find no answer perhaps because I can't really summarize the issue very well, bear my off English.
I kind of work around it by setting a timeout before fetch data. But it's not a decent solution, right?
I thought the fetching posts action is quicker than creating the post but the fetching is triggered after the success callback of creating ..I am very confused, can somebody give a hint, please?
Thank you so much!

1 Answer
1

So I figure out the problem, it's in the front end. In the article service create method I used a promise to wrap up the observable requesting to create a new article. It resolves whenever the observable.subcribe() get a response.

.subscribe((e: HttpResponse<any>)=>

resolve();

, err=>reject(err))

So this subcribe actually got 2 response : first is a type 0 response meaning "sent", second is a type 4 response which is what we want. The promise resolves earlier when it got the type 0. So all I need is a type check before resolve()

.subscribe((e: HttpResponse<any>)=>
if(e.type == 4)
resolve();

, err=>reject(err))

That's it. Thanks for the attention!

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.