基于条件停止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); });

} }

搜索.ccomponent.html

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

我想做的是取消其余Observable链的执行，如果由formControl发出的值为null，则不继续转到switchMap操作符（以便不执行请求）。

- Nacim Idjakirene

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

- Mark van Straten

---

如果过滤器阻止了链的其余部分，但您仍希望返回一个值，即使是 null，该怎么办？ - JesseBoyd