根据条件停止 Observable 链的执行

Question

在一个 Angular 应用程序中，我的组件中有这个 Observable 链：

@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

search.component.ts

results: any[] = [];
queryField: FormControl = new FormControl();
constructor(private _apiService: ApiService) { }

ngOnInit() {

this.queryField.valueChanges
.debounceTime(200)
.distinctUntilChanged()
.switchMap((query) => this._apiService.search(query)) // was subscribe
.subscribe(result => {  this.results = result.items; console.log(result); });

} }

seach.ccomponent.html

<input [formControl]='queryField' type="text" id="keyword" autocomplete="off" placeholder="start typing..."/>

如果 formControl 发出的值是 null .

Answer 1

因此，如果我理解正确，如果它们为空，您希望 .filter() 排放，因此您的 switchMap 不会执行：

this.queryField.valueChanges
  .filter((q) => q !== null) // only proceed if the value is not null
  .debounceTime(200)
  .distinctUntilChanged()
  .switchMap((query) => this._apiService.search(query)) // was subscribe
  .subscribe(result => {  
    this.results = result.items; 
    console.log(result); 
  });