Angular RxJS - 需要等到订阅以其他方法完成

Question

@Component({
  selector: 'note-consultant',
  template: '<div>
    <div>{{patientInformation}}</div>
    <textarea #textElemRef></textarea>
    <button (click)="onSave()">Done</button>
    </div>'
})
export class NoteConsultantComponent implements OnInit, AfterViewInit { 
    recentResponse:any;
    patientInformation:any;
    @ViewChild('textElemRef') textElemRef: ElementRef;

    ngAfterViewInit(): void {
    fromEvent(this.textElemRef.nativeElement, 'keyup').pipe(
      map((event: any) => {
        return event.target.value;
      })
      ,debounceTime(1000)
    ).subscribe((text: string) => {

      let request = this.buildRequestItem(text);
        this.patientService.saveProblemNotes(request).subscribe((resp: any) => {
            if (resp.error) {
              console.log(resp.error);
              return;
            }

            //update response in temp variable...
            this.recentResponse = resp.problemText;
            }
        });
    }
    onSave() {
       if (this.recentResponse != null) {    
       //when clicking save button update DOM
       this.patientInformation = this.recentResponse;
     }

      //Reset temp variable
      this.recentResponse = null;
    }
}

我有一个场景，当用户输入文本时，我必须点击 API 并保存输入的数据。 因为每次击键都点击 API 是低效的。 所以我使用了 'fromEvent' RxJs 运算符来消抖一秒钟。

问题是我无法更新 HTML（因为我在这里简化了 HTML，但在我的项目中它是一个可折叠的面板，它会导致一些我不想要的 HTML 元素消失）因为我输入数据所以这就是原因我将响应存储在一个临时变量“recentResponse”中，并在单击“保存”按钮时更新 HTML。

但这里的问题是，如果用户输入非常快并单击“保存”按钮，则订阅完成需要几秒钟的时间，直到那时 'recentResponse' 未定义，因此 'patientInformation' 永远不会得到更新（HTML 也是如此）。

我怎样才能等到订阅在 onSave() 内完成？ 我需要等到 'recentResponse' 有一些回应。

Answer 1

您可以绑定到 keyup 事件，并使用 javascript timeout 推迟执行，直到输入停止。

html

<input type="text" (keyup)="onKeyUp($event)" />

打字稿

timeout: number;

onKeyUp(event): void {
  if (this.timeout) {
    window.clearTimeout(this.timeout);
  }

  this.timeout = window.setTimeout(() => {
    // TODO: process key up here
  }, 500);
}

Answer 2

我建议不要在keyup 、 keydown 、 keypress等事件上调用 API，它会在每次按键时击中服务器，而是添加blur事件。

回答你的问题

方法 1 - 防止按钮单击仅禁用按钮，直到 API 完成。

fromEvent().subscribe(() => {
 disableBtn = true;
 this.patientService.saveProblemNotes(request).subscribe(() => {
  disableBtn = false; 
 })
})

方法 2 - Observable将 API 函数包装在 observable 中，并在onSave函数中监听 observable 完成

myApi() {
 new Observable(observer => {
  this.patientService.saveProblemNotes(request).subscribe(() => {
   observer.next();
  });
 });
}

onSave() {
 this.myApi.subscribe(() => {
  //Api is completed
 })
}