質問編集履歴

1 誤字

dev3310

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));
   }
  //検索値が変わるとここから値を流す
  filterMediaList(): void {
  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から呼び出すメソッドの書き方
がよくわかりませんでした、
  • TypeScript

    1472 questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • RxJS

    26 questions

    RxJSは、Observablesを用いたリアクティブプログラミングのJavaScript向けの実装です。イベント駆動処理も含めた非同期処理を高い可読性を持って容易にコーディングできます。

  • Angular

    403 questions

    Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る