如何在 Angular 中的 Keypress 上调用 api

Question

当用户在文本框上单击（在按键事件上）时，我试图触发 API 调用，我该怎么做 Angular。我在使用 debounce 方法时遇到错误 Cannot read property 'valueChanges' of undefined

app.component.ts

ngOnInit() {

    this.searchField.valueChanges

        .pipe(
            debounceTime(500),
            distinctUntilChanged(),
            map((val) => {
                this.http.post<any>('http://localhost:3000/articles/articleslistData', { pubid: '3', pubdate: this.dateChanged }).subscribe({
                    next: data => {
                        console.log(data);
                    },
                    error: error => {
                        this.errorMessage = error.message;
                        console.error('There was an error!', error);
                    }
                })
            })
        )
        .subscribe();
}

app.component.html

<div class="form-field col-lg-12">
<label class="label" for="message">Headline</label>
<input id="message" class="input-text js-input" type="text" required [formControl]="searchField">
</div> 

Answer 1

此外，你需要使用 switchMap (switchMap "reemplace" one observable by another one) 类似

this.searchField.valueChanges.pipe(
    debounceTime(500),
    distinctUntilChanged(),
    switchMap ((val) => {
          //we can not return the "val", else
          //the result of this.http.post
          // here you has "val", I suppose i your call
          // you use it
        return this.http.post<any>('http://localhost:3000/articles/articleslistData', { pubid: '3', pubdate: this.dateChanged })
    })
).subscribe(data => {
   console.log(data);
},
error => {
  this.errorMessage = error.message;
  console.error('There was an error!', error);
}
);

看到您只有一个订阅

Answer 2

您需要在 ngOnInit 或属性声明中初始化表单控件。

export class MyClass {
  // solution 1
  public searchField = new FormControl({});
  ngOnInit() {
      // solution 2
      this.searchField = new FormControl({});
      // your code here
  }
}

您也可以使用 FormBuild 类 欲了解更多信息

见：https://angular.io/api/forms/FormControl#initializing-form-controls