Question

 getPersonalMast(name:string){
        console.log("patient");
          this.masterDataService.getPersonalMast(this.staff).subscribe( console.log("Inside subscribe"), response => this.staffInfo = response);
          return this.staffInfo;
    }

这是名为

的主服务

getPersonalMast(personName: String): Observable<PersonalMastModel[]>{
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 => response.json().result)
               .catch(this.handleError);
            }
    }

拥有此服务，每次调用此服务都会导致多次访问该网址。

每个方法调用=多次服务调用。

为什么会发生这种情况，我该如何解决？

调用服务代码：

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

Answer 1

通常，此行为是订阅Observables而不是在销毁组件时取消订阅的结果，因此订阅仍然存在，并且当组件再次加载时，Observable会多次响应组件请求。这些订阅会累积。

为防止这种情况发生，并防止内存泄漏，您应该在销毁每个组件时取消订阅Observable。

将这些导入添加到您的组件

import 'rxjs/add/operator/takeUntil';
import { Subject } from 'rxjs/Subject';

在你的课程中添加它 - 我通常在构造函数上面执行此操作。

  private ngUnsubscribe: Subject<any> = new Subject<any>()

添加ngOnDestroy功能

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

然后在您的.subscribe

之前立即添加

  .takeUntil(this.ngUnsubscribe)

所以在你的情况下，它看起来像这样。

getPersonalMast（名称：字符串）{ console.log（＆＃34; this.staff＆＃34; + JSON.stringify（this.staff））;

this.masterDataService.getPersonalMast(this.staff)
      .takeUntil(this.ngUnsubscribe)
      .subscribe(response => this.staffInfo = response);
      return this.staffInfo;
}

所以会发生什么是订阅将保持活动状态，直到你离开组件为止，此时ngOnDestroy将彻底解除Observable的取消订阅。

修改：根据您的HTML

如果模板中有错误，例如未关闭的标记：

<div><div>代替<div></div>等

或者，如果提交表单的按钮保留为默认类型（提交），您可能会看到此行为。

<button type="button" (click)="submitForm()">

而不是：

<button (click)="submitForm()"> or <button type="submit" (click)="submitForm()">

Angular调用服务两次

1 个答案: