Angular5 - 导致未定义的行为主体

Question

我浏览了很多 Rxjs 链接和 Whosebug 链接，但我无法弄清楚这个

我在服务中定义了一个 http.get()。我试图在行为主题中发出可观察到的响应，然后订阅它（因为我相信行为主题具有跟踪最后发出的数据流的优势）。这是服务和组件代码

SearchService.ts

import { ReplaySubject } from 'rxjs/Rx';
import { error } from 'util';
import { Subject } from 'rxjs/Subject';

import { Response } from '@angular/http';

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import {Promotion} from './dto/promo.dto';
import { List } from 'immutable';
import {map, filter, reduce, switchMap, tap} from 'rxjs/operators';


@Injectable()
export class SearchService {
   getUrl: String = './../assets/promotionList.json';
   subject: BehaviorSubject<Promotion[]> ; 
   subjectAsObservable;
   stringify  = require('json-stringify-safe');

   someResult;
   constructor(private http: HttpClient) {
   this.subject = new BehaviorSubject<Promotion[]>([]);

   }
    getNextObservable():Observable<Promotion[]>{
      return this.subject.asObservable(); 
    }
    setValueInSubject(){
       this.getPromoList().subscribe(data => {
       this.someResult = data;
       console.log('getting some result', this.someResult);
      });
  this.subject.next(this.someResult);
}


getPromoList(): Observable<Promotion[]>{

  return this.http.get(`${this.getUrl}`).map(data => {
    console.log('raw data', data);

    this.someResult = data;
    console.log('someresults in first method', this.someResult);
    return this.someResult;
    // now the response returned is the actual Promotion response
  });

 }
}

SearchPromoComponent.ts

import { NgxLoggerLevel } from 'ngx-logger';
import { retry } from 'rxjs/operator/retry';
import { Subject } from 'rxjs/Subject';
import { ActivatedRoute } from '@angular/router';
import { setTimeout } from 'timers';


import { Response } from '@angular/http';

import { FormBuilder, FormGroup, FormControl, Validators, 
ReactiveFormsModule } from '@angular/forms';

import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { debounceTime, filter, flatMap, map, switchMap, tap } from 
'rxjs/operators';

import { Promotion } from './../dto/promo.dto';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { SearchService } from './../search.service';
import { AfterViewChecked, AfterViewInit, Component, OnDestroy, OnInit 
 } from '@angular/core';
import { NGXLogger } from 'ngx-logger';

@Component({
  selector: 'app-search-promo',
  templateUrl: './search-promo.component.html',
  styleUrls: ['./search-promo.component.css']
})
export class SearchPromoComponent implements  OnInit{
  searchGroup: FormGroup;
  stringify  =  require('json-stringify-safe');
  someResult: any;
  promoList: Promotion[];
  subsc: Subscription;
   subValue;
  localInput = new FormControl('', Validators.required);
       consumedPromoList: Observable<Promotion[]>;
       loading: Boolean = false;


  compSubscription: Subscription;
  // Use activated route to get the data from
  constructor(private searchService: SearchService, fb: FormBuilder,
     private paramConfig: ActivatedRoute,
     private logger: NGXLogger,
     private subjectPromoService: SubjectPromoService
  ) {
     this.searchGroup = fb.group({
  'localInput': this.localInput
  });

   }

    ngOnInit(){

       // inorder for the subject subscription to work
       // call like this

       this.searchService.setValueInSubject();

       this.subsc = 
       this.searchService.getNextObservable().subscribe(data => 
       console.log('in comp', data));
     }

 }

记录器 in comp 始终未定义，实际上 http 服务 returns 在 in comp

之后消耗的值

你能帮我弄清楚如何从行为主题中获取 http 发出的值吗

Answer 1

请在订阅下发出。 this.someResult 发射时可能不可用。

setValueInSubject(){
   this.getPromoList().subscribe(data => {
       this.someResult = data;
       console.log('getting some result', this.someResult);
       this.subject.next(this.someResult);
  });
}

在您的实现中，它是 Behavior Subject，所以在您的下一个获取请求中，我相信您应该从上一个请求中获取数据，除非 this.someResult 在除订阅。

Answer 2

在您的服务中，将 this.subject.next 移到 subscribe 和 component subscribe 中 subject

服务：

  setValueInSubject(){
       this.getPromoList().subscribe(data => {
        this.someResult = data;
        console.log('getting some result', this.someResult);
        this.subject.next(this.someResult);
      });
  }

在你的组件中：

 ngOnInit(){

   this.searchService.setValueInSubject();
   this.subsc = 
   this.searchService.subject.subscribe(data => 
   console.log('in comp', data)
   );
 }

Angular5 - 导致未定义的行为主体

Angular5 - Behavior Subject resulting in undefined

angular

httpclient

behaviorsubject