Subject.next() 中的值更改时未调用 Observable
Observable not being called on value change in Subject.next()
我正在尝试构建一个自动完成功能,并且我正在使用 Observable 和 Subject。但是只要 Subject 对象的值发生变化,就不会调用服务方法。下面是我定义主题的组件代码。
detailsPersist.component.ts
import { Component, OnInit } from "@angular/core";
import { Subject } from 'rxjs/Subject';
import { DataService } from './data.service';
export class DetailsPersistComponent implements OnInit{
products;
term = new Subject();
constructor(private _dataService: DataService){
}
ngOnInit(){
this._dataService.getSwiftProducts(this.term)
.subscribe(products => this.products = products)
}
search($event) {
let q = $event.target.value
console.log(q)
this.term.next(q)
}
}
下面是我的数据服务的代码
data.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs';
@Injectable()
export class DataService{
getSwiftProducts(term): Observable<any>{
return this._http.get("/api/getSwiftProduct/:"+term)
.map(result => this.result = result.json().data)
}
}
您可能想做这样的事情:
ngOnInit() {
this.subscription = this.term
.switchMap(term => this._dataService.getSwiftProducts(term))
.subscribe(products => this.products = products)
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
我正在尝试构建一个自动完成功能,并且我正在使用 Observable 和 Subject。但是只要 Subject 对象的值发生变化,就不会调用服务方法。下面是我定义主题的组件代码。
detailsPersist.component.ts
import { Component, OnInit } from "@angular/core";
import { Subject } from 'rxjs/Subject';
import { DataService } from './data.service';
export class DetailsPersistComponent implements OnInit{
products;
term = new Subject();
constructor(private _dataService: DataService){
}
ngOnInit(){
this._dataService.getSwiftProducts(this.term)
.subscribe(products => this.products = products)
}
search($event) {
let q = $event.target.value
console.log(q)
this.term.next(q)
}
}
下面是我的数据服务的代码
data.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs';
@Injectable()
export class DataService{
getSwiftProducts(term): Observable<any>{
return this._http.get("/api/getSwiftProduct/:"+term)
.map(result => this.result = result.json().data)
}
}
您可能想做这样的事情:
ngOnInit() {
this.subscription = this.term
.switchMap(term => this._dataService.getSwiftProducts(term))
.subscribe(products => this.products = products)
}
ngOnDestroy() {
this.subscription.unsubscribe();
}