コンポーネントを再読み込みする際の問題の発生角度

Question

私のコースページに結合/結合解除ボタンがあります。私が望むのは、Joinボタンをクリックした後に、ページ（コンポーネント）をリロードする必要があるだけです（または、可能であればボタンを押す）ので、Unjoinボタンが表示されるはずです。今のところ、ボタンが変更されたかどうかを確認するために、手動でF5キーでページをリロードする必要があります。 私がやったことは、subscribeCourse（）関数でloadOnCourseInit（）を呼び出すことですが、成功しませんでした。ここに私の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; 
    }); 
    } 
} 

は私のボタンが

<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> 

ある誰がどんな考えを持っていますか？

Answer 1

ボタンはthis.flagフラグに基づいてテキストを変更するはずですか？

もしそうなら、このような何か：

<button (click)='someMethod()' 
      [ngClass]="{'otherStyle': flag }"> 
       {{flag ? 'Join' : 'Unjoin'}} 
    </button>