1 
@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”未定义，因此“患者信息”永远不会得到更新（HTML 也是如此）。

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

4

2 回答 2

1

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

回答你的问题

方法 1 - 阻止按钮单击只需禁用按钮，直到 API 完成。

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

方法 2 - ObservableonSave将 API 函数包装在 observable 中并在函数 中侦听 observable 完成

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

onSave() {
 this.myApi.subscribe(() => {
  //Api is completed
 })
}
于 2020-02-07T10:34:37.583 回答
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);
}
于 2020-02-07T10:21:55.660 回答