[英]Problems on reloading component Angular
I've got my courses page with Join/Unjoin button. 我的课程页面带有“加入/取消加入”按钮。 All I want is that after clicking on Join button angular should reload page (component) (or just button if its possible) and I should see Unjoin button.
我想要的是在单击“加入”按钮后,angular应该重新加载页面(组件)(或者如果可能的话,仅重新加载按钮),并且我应该看到“取消加入”按钮。 For now I have trouble that I need manually reload page by F5 to see if button changed.
现在,我遇到麻烦,需要按F5手动重新加载页面以查看按钮是否已更改。 What I tried to do is to call loadOnCourseInit() in subscribeCourse() function, but with no success.
我试图做的是在subscribeCourse()函数中调用loadOnCourseInit(),但是没有成功。 here is my component.ts file:
这是我的component.ts文件:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AuthService } from '../../services/auth.service'
import { UpdateService } from '../../services/update.service'
import { Router } from '@angular/router'
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'app-course',
templateUrl: './course.component.html',
styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
CourseId: String;
course: any;
user:any;
subscriptions:any;
flag:boolean;
constructor(private route: ActivatedRoute, private authService: AuthService, private router: Router, private updateService:UpdateService) { }
ngOnInit() {
this.loadCourseOnInit();
this.authService.getProfile().subscribe(profile=>{
this.user = profile.user;
this.subscriptions = profile.user.subscriptions;
this.subscriptionCheck(this.subscriptions, this.CourseId);
},
err=>{
console.log(err);
return false;
});
}
onSubscribeClick(){
this.updateService.subscribeOnCourse(this.CourseId, this.user).subscribe(data=>{
console.log("subscribedata")
console.log(data);
this.loadCourseOnInit();
})
}
onUnsubscribeClick(){
this.updateService.unsubscribeFromCourse(this.CourseId, this.user).subscribe(data=>{
console.log(data);
this.loadCourseOnInit();
})
}
subscriptionCheck(subscriptions, CourseId){
this.flag = false
console.log(this.subscriptions)
if(subscriptions.length != null){
for(let subscription of this.subscriptions){
if(subscription == CourseId){
console.log("true");
this.flag = true;
return this.flag
}
else{
console.log("false from subscription == CourseId");
this.flag = false;
}
}
}else{
console.log("false from subscriptions.length != null")
this.flag = false;
}
}
loadCourseOnInit(){
this.CourseId = this.route.snapshot.params['id']
this.authService.getCoursesById(this.CourseId).subscribe(data=>{
this.course =[data.course];
},
err=>{
console.log(err);
return false;
});
}
}
here are my buttons 这是我的按钮
<a *ngIf="flag == true" (click)="onUnsubscribeClick()" >
<button type="button" class="btn btn-danger btn-lg btn-block">Unjoin</button>
</a>
<a *ngIf="flag == false" (click)="onSubscribeClick()">
<button type="button" class="btn btn-success btn-lg btn-block">Join</button>
</a>
Does anyone have any ideas? 有人有什么想法吗?
Is the button supposed to change its text based on the this.flag
flag? 该按钮是否应该根据
this.flag
标志更改其文本?
If so, then something like this: 如果是这样,则如下所示:
<button (click)='someMethod()'
[ngClass]="{'otherStyle': flag }">
{{flag ? 'Join' : 'Unjoin'}}
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.