防止在 angular 8 中多次运行相同的服务

Question

So I am having three button(A,B) that is calling the same services to get the same data. So I just want to call the service once, not matter how many times i'm click the button, what I did is to add a boolean to determine if the service has been called already, and if yes, then just the the existData that saved from the previous service. Below are my code, however, I am not able to get the updated boolean value and data when I click the button the second time or third time.

ts file

exist: boolean = false;
buttonName : string;
postData: any = [];
data: any; = []
existData: any = [];
constructor(){}
ngOnInIt(){
   if(buttonName == "A"){
     if(this.exist == true){              // this.exist is always false no matter how many times button click
       this.existData();
     }else{
       this.getData();
     }
   }else if(buttonName == "B"){
     if(this.exist == true){
       this.existData();
     }else{
       this.getData();
     }
   }
}
getPostData(){
   this.postData.name = "Button";
   this.postData.parameters = [];
   this.exist = true;
}
getData(){
   this.getPostData();
   this.appService.getData(this.postData).pipe(first()).subscribe(data => {
      this.data = data;
      this.existData = data;
   })
}
existData(){
   console.log(this.existData)        // this is always []
}

Answer 1

first of all ngOnInIt is invoked only once, you have to call getData() on a button event and then set boolean to exist. If you just want to call getData once you can simply do it on ngOnInIt itself no need to check any other conditions.