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>

重组组件角度问题

1 个答案: