简体   繁体   English

重新加载组件Angular的问题

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM