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

@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'做出回应。

评论
  • 上个路口
    上个路口 回复

    您可以绑定到keyup事件,并使用javascript超时来推迟执行,直到键入停止为止。

    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);
    }