angular - Sette variabel med RxJs tap-operator

Jeg har hatt problemer med å sette variabelen awaiting_response (nedenfor) til true (den blir ikke satt), ved bruk av tap() fra RxJs.

En midlertidig løsning ble laget ved å sette utenfor pipe(), men jeg forestiller meg at det ikke er ideelt.

Den samme koden kan sees her

Her er component.ts

import { Component, OnInit } from "@angular/core";
import { Observable, Subject, of } from "rxjs";
import { debounceTime, distinctUntilChanged, tap, switchMap, catchError, finalize } from "rxjs/operators";
import { ServiceApiService, ITemp } from "./service-api.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  protected addresses: Observable<ITemp[]>;
  private search_term: Subject<string> = new Subject<string>();
  protected executing_search: boolean = false;
  protected awaiting_response: boolean = false;

  constructor(private search: ServiceApiService) {}

  ngOnInit() {
    this.addresses = this.search_term.pipe(
      debounceTime(3500),
      distinctUntilChanged(),
      tap(() => (this.awaiting_response = true)),
      tap(() => () => console.log("awaiting", this.awaiting_response)),
      switchMap((term: string) =>
        this.search.search_addresses(term).pipe(
          catchError(() => of<ITemp[]>([]))
          //finalize(() => setTimeout(() => (this.awaiting_response = false), 0))
        )
      ),
      tap(() => (this.awaiting_response = false)),
      tap(() => console.log("awaiting", this.awaiting_response)),
      tap(() => (this.executing_search = false))
      //finalize(() => (this.awaiting_response = false))
    );
  }

  execute_search() {
    this.executing_search = true;
    this.search_term.next("term");
  }
}

Tjenesten service

import { Injectable } from "@angular/core";
import { Observable, Subscriber } from "rxjs";

export interface ITemp {
  value: string;
}

@Injectable({
  providedIn: 'root',
})
export class ServiceApiService {
  constructor() {}

  search_addresses(term: string): Observable<ITemp[]> {
    return Observable.create((observer: Subscriber<any>) => {
      observer.next([{ value: `response: ${new Date().toString()}` }]);
      observer.complete();
    });
  }
}

Og component.html

<button (click)="execute_search()">Search</button>
<div>Awaiting: {{awaiting_response | json}}</div>
<div>Executing {{executing_search | json}}</div>
<div>Response: {{addresses | async | json}}

Svar #1

Du kan bare ikke se loggen, bytt ut

tap(() => () => console.log("awaiting", this.awaiting_response))

til

tap(() => console.log("awaiting", this.awaiting_response))

Svar #2

Kort sagt bør koden din fungere som forventet.

Her er forklaringen. Din awaiting_response settes til true, men du vil ikke kunne se forskjellen siden observer i tjenesten din sender ut verdier umiddelbart

For å vise forskjellen har jeg satt en timeout i tjenesten som nedenfor,

search_addresses(term: string): Observable<ITemp[]> {
    return Observable
    .create((observer: Subscriber<any>) => {
      setTimeout(() => {
        observer.next([{ value: `response: ${new Date().toString()}` }]);
        observer.complete();
      }, 3000);
    });
}

du kan se forskjellen i dette stackblitz

Relaterte artikler