Angular 可观测的never触发器上的角度开关映射

我想实现一个搜索组件，就像在Angular教程中一样

问题：

search

方法触发并修改

searchTerms:Subject

，但

switchMap

从不触发

代码：

导入

import { Component, OnInit } from '@angular/core';

import { SearchService } from "./search.service";

import { Observable }        from 'rxjs/Observable';
import { Subject }           from 'rxjs/Subject';

// Observable class extensions
import 'rxjs/add/observable/of';

// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

import {Suggest} from "./suggest";

装饰师

@Component({
  selector: 'search-engine',
  templateUrl: 'search-engine.component.html'
})

组件

export class SearchEngineComponent implements OnInit {

  suggestions: Observable<Suggest[]>;
  private searchTerms = new Subject<string>();

  constructor(private searchService: SearchService) {  }

  ngOnInit(): void {
    this.suggestions = this.searchTerms
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(term => {
        console.log(term);
        return Observable.of<Suggest[]>([]);
      })
      .catch(error => {
        console.log(error);
        return Observable.of<Suggest[]>([]);
      });
  }

  search(term: string): void {
    this.searchTerms.next(term);
  }
}

导出类SearchEngineComponent实现OnInit{
建议：可见；
private searchTerms=新主题（）；
构造函数（私有搜索服务：搜索服务）{}
ngOnInit（）：void{
this.advisions=this.searchTerms
.debounceTime（300）
.distinctUntilChanged（）
.switchMap（术语=>{
控制台日志（术语）；
（[]）的可观测收益率；
})
.catch（错误=>{
console.log（错误）；
（[]）的可观测收益率；
});
}
搜索（术语：字符串）：无效{
this.searchTerms.next（术语）；
}
}

HTML

<input #searchBox id="search-box" (keyup)="search(searchBox.value)">

---

你必须订阅可观察的，如果你不订阅，什么也不会发生

编辑：

还有另一种情况，您可以在视图中声明和观察，并通过

async

管道隐式订阅，这就是这里发生的情况：

<div id="search-component">
  <h4>Hero Search</h4>
  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
  <div>
    <div *ngFor="let hero of heroes | async"
         (click)="gotoDetail(hero)" class="search-result" >
      {{hero.name}}
    </div>
  </div>
</div>

英雄搜寻
{{hero.name}

---

关于

async

管道的更多信息

您必须订阅可观察的，如果您不订阅，则不会发生任何事情

编辑：

还有另一种情况，您可以在视图中声明和观察，并通过

async

管道隐式订阅，这就是这里发生的情况：

<div id="search-component">
  <h4>Hero Search</h4>
  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
  <div>
    <div *ngFor="let hero of heroes | async"
         (click)="gotoDetail(hero)" class="search-result" >
      {{hero.name}}
    </div>
  </div>
</div>

英雄搜寻
{{hero.name}

---

关于

async

管道的更多信息

我同意你的看法。但是在教程中：我没有发现我们在哪里订阅可观察的。。你能告诉我怎么做吗？你救了我，谢谢：）所以如果我没有带*| async*的HTML模板，我必须在.switchMap和.catch之间添加.subscribe（//do something）。是吗？不是，就在接球之后。你不能在

subscribe（）

之后链接更多的操作符。你把

放在哪里。subscribe

我认为并不重要，尽管我总是把它放在

switchMap

之后。我建议您将

.filter

放在

开关映射

之前，以检查

术语

是否为空或验证您的条件。我同意您的看法。但是在教程中：我没有发现我们在哪里订阅可观察的。。你能告诉我怎么做吗？你救了我，谢谢：）所以如果我没有带*| async*的HTML模板，我必须在.switchMap和.catch之间添加.subscribe（//do something）。是吗？不是，就在接球之后。你不能在

subscribe（）

之后链接更多的操作符。你把

放在哪里。subscribe

我认为并不重要，尽管我总是把它放在

switchMap

之后。我建议您将

.filter

放在

switchMap

之前，以检查

term

是否为空或验证您的条件。