title: Angular calls services twice
body: <pre><code> getPersonalMast(name:string){
          console.log("patient");
            this.masterDataService.getPersonalMast(this.staff).subscribe( console.log("Inside subscribe"), response =&gt; this.staffInfo = response);
            return this.staffInfo;
      }
  </code></pre>
  
  <p>THis is the master service called </p>
  
  <pre><code>getPersonalMast(personName: String): Observable&lt;PersonalMastModel[]&gt;{
  console.log("patientInfo");
          let headers = new Headers();        
              if(personName!= undefined){
                  headers.append(AppUtils.HEADER_AUTHENTICATION, localStorage.getItem(AppUtils.STORAGE_ACCOUNT_TOKEN));
                  headers.append('Content-Type','application/json');
                  headers.append('Access-Control-Allow-Origin', '*');
               return this.http.post(AppUtils.GET_PERSONAL_MASTER_URL ,{personName:personName},{headers:headers})
  
                .map( console.log("Inside map"),response =&gt; response.json().result)
                 .catch(this.handleError);
              }
      }
  </code></pre>
  
  <p>Having this service, Each time invoking this service causes hitting the url multiple times.</p>
  
  <p>Each method call = multiple service call.</p>
  
  <p>Why this happen and how can I solve this ?</p>
  
  <p>Invoking the service code :</p>
  
  <pre><code>  &lt;input  ng2-auto-complete 
                      [(ngModel)]="staff"                
                      [source]="staffInfo"
                      placeholder="enter text"
                      [list-formatter]="listFormatter"
                      value-property-name="perscode"
                      display-property-name="personName"
                      (keypress)="getPersonalMast($event)"
                      &gt;
  </code></pre>