dev3310 score 24
2020/06/08 08:52 投稿
| rxjsのswitchMapでメソッド呼び出し |
| Angularで検索フォームのようなものを作っています。 |
| 検索処理自体はAPIを使うのではなく、検索値が変わったらそれを検知してAngular側でデータにフィルタをかける仕組みです。 |
| 検索処理が終わる前に検索ボタンが再び押された場合などを想定し、switchMapを使って一番最新の検索のみ結果を返すようにしようと思いましたが、うまくいきません。 |
| 最初から検索処理まで入れてしまうとコードも複雑になり、エラーもどこで起きたのかわかりにくくなってしまったので、 |
| 検索処理の代わりに、検索条件が変わったらそれを検知してnumber型の1を渡し、＋10して、それをコンソールに出力するようなものを作りました。 |
| ```ここに言語を入力 |
| @Component({ |
| selector: 'app-search', |
| templateUrl: './search.component.html', |
| styleUrls: ['./search.component.scss'], |
| }) |
| export class SearchComponent implements OnInit { |
| //フィルタ条件を送る用 |
| private serchPrmSubject = new Subject<number>(); |
| public serchPrmState$ = this.serchPrmSubject.asObservable(); |
| ngOnInit(): void { |
| //検索条件が流れてくるのを待ち受ける |
| this.serchPrmState$ |
| //ここのswitchMapの書き方がわかりません |
| .pipe(switchMap(() => this.search())) |
| .subscribe((result) => console.log(result)); |
| } |
| //検索値が変わるとここから値を流す |
| filter |
| filterList(): void { |
| this.serchPrmSubject.next(1); |
| } |
| //実際は検索処理が入るところ |
| search() { |
| return (input) => |
| // return |
| Observable.create((observer) => { |
| input.subscribe({ |
| next(value) { |
| observer.next(value + 10); |
| }, |
| error(err) { |
| observer.error(err); |
| }, |
| complete() { |
| observer.complete(); |
| }, |
| }); |
| }); |
| } |
| } |
| ``` |
| ですが、 |
| where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. |
| というエラーが出てしまいます。 |
| 色んなページを調べて参考にして書いてみたのですが |
| ・switchMapで別の処理(検索処理が長いのでメソッドに切り出したい)を呼ぶ方法 |
| ・switchMapから呼び出すメソッドの書き方 |
| がよくわかりませんでした、 |
