Javascript 受试者不';不发射数据
我有一个从用户那里接收数据并在表单中验证的应用程序。当验证为真时,按钮将被启用,并且在此场景中,用户将被允许提交其订单 我不知道为什么在这个部分我的主题不起作用。我的意思是我可以Javascript 受试者不';不发射数据,javascript,angular,typescript,rxjs,Javascript,Angular,Typescript,Rxjs,我有一个从用户那里接收数据并在表单中验证的应用程序。当验证为真时,按钮将被启用,并且在此场景中,用户将被允许提交其订单 我不知道为什么在这个部分我的主题不起作用。我的意思是我可以.next(value)在组件和服务中,我可以控制台.log(value)来检查它是否到达服务区 我可以看到,正在接收服务中的值,但接收到的值没有被订阅到我想要使用它们的组件中。我停止运行项目,但无法修复。以下是我尝试过的: AuthService.ts emailSubject=new Subject<str
.next(value)
在组件和服务中,我可以控制台.log(value)
来检查它是否到达服务区
我可以看到,正在接收服务中的值,但接收到的值没有被订阅到我想要使用它们的组件中。我停止运行项目,但无法修复。以下是我尝试过的:
AuthService.ts
emailSubject=new Subject<string>();
getEmail(value)
{
console.log(value);
this.emailSubject.next(value); //prints email to the console correctly
}
export class CarService
{
carrierSubject=new Subject<number>();
orderSubject=new Subject<Order[]>();
totalCostSubject=new Subject<number>();
lastTotalCostSubject=new Subject<number>();
getId(myIndex:number)
{
this.carrierSubject.next(myIndex);
}
setOrders(value)
{
console.log(value);
this.orderSubject.next(value);
}
setTotalCost(value)
{
this.totalCostSubject.next(value);
}
lastSetTotalCost(value)
{
this.lastTotalCostSubject.next(value);
}
export class CarPaymentComponent implements OnInit {
car:Car;
selectedCar:string;
somePlaceholder : number = 0;
myArray:Order[];
email:string;
constructor(private carService:CarService,private authService:AuthService) { }
ngOnInit() {
this.carService.carrierSubject.subscribe(value=>
{
this.car=this.carService.getCar(value);
this.selectedCar=this.car.brand;
});
this.carService.lastTotalCostSubject.subscribe(value=>
{
this.somePlaceholder=value;
});
this.carService.orderSubject.subscribe(value=>
{
this.myArray=value;
}
);
this.authService.emailSubject.subscribe(value=>
{
this.email=value;
});
}
onSubmit()
{
console.log("ORDER INFO")
console.log('This order ordered by:'+this.email);
console.log("Ordered Car:"+this.selectedCar);
console.log("Ordered Parts:"+this.myArray);
console.log("Total Cost:"+this.somePlaceholder);
}
}
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs'; //<----Add this line
@Injectable()
export class AuthService {
emailSubject = new BehaviorSubject<string>("test@test.com"); //<--- provide an initial value here
getEmail(value) {
console.log(value);
this.emailSubject.next(value); //prints email to the console correctly
}
}
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class CarService {
carrierSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here
orderSubject = new BehaviorSubject<Order[]>([]); //<-- provide an initial value here
totalCostSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here
lastTotalCostSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here
getId(myIndex: number) {
this.carrierSubject.next(myIndex);
}
setOrders(value) {
console.log(value);
this.orderSubject.next(value);
}
setTotalCost(value) {
this.totalCostSubject.next(value);
}
lastSetTotalCost(value) {
this.lastTotalCostSubject.next(value);
}
}
正如@lealcelderio和@FatemeFazli所提到的,您需要使用
BehaviorSubject
或ReplaySubject
。您编写的代码不起作用的原因是因为您的可观察对象尚未激发任何值。本质上,当您执行.subscribe
时,您是在挂接更改事件。但在你的情况下,改变还没有被取消
AuthService.ts
emailSubject=new Subject<string>();
getEmail(value)
{
console.log(value);
this.emailSubject.next(value); //prints email to the console correctly
}
export class CarService
{
carrierSubject=new Subject<number>();
orderSubject=new Subject<Order[]>();
totalCostSubject=new Subject<number>();
lastTotalCostSubject=new Subject<number>();
getId(myIndex:number)
{
this.carrierSubject.next(myIndex);
}
setOrders(value)
{
console.log(value);
this.orderSubject.next(value);
}
setTotalCost(value)
{
this.totalCostSubject.next(value);
}
lastSetTotalCost(value)
{
this.lastTotalCostSubject.next(value);
}
export class CarPaymentComponent implements OnInit {
car:Car;
selectedCar:string;
somePlaceholder : number = 0;
myArray:Order[];
email:string;
constructor(private carService:CarService,private authService:AuthService) { }
ngOnInit() {
this.carService.carrierSubject.subscribe(value=>
{
this.car=this.carService.getCar(value);
this.selectedCar=this.car.brand;
});
this.carService.lastTotalCostSubject.subscribe(value=>
{
this.somePlaceholder=value;
});
this.carService.orderSubject.subscribe(value=>
{
this.myArray=value;
}
);
this.authService.emailSubject.subscribe(value=>
{
this.email=value;
});
}
onSubmit()
{
console.log("ORDER INFO")
console.log('This order ordered by:'+this.email);
console.log("Ordered Car:"+this.selectedCar);
console.log("Ordered Parts:"+this.myArray);
console.log("Total Cost:"+this.somePlaceholder);
}
}
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs'; //<----Add this line
@Injectable()
export class AuthService {
emailSubject = new BehaviorSubject<string>("test@test.com"); //<--- provide an initial value here
getEmail(value) {
console.log(value);
this.emailSubject.next(value); //prints email to the console correctly
}
}
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class CarService {
carrierSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here
orderSubject = new BehaviorSubject<Order[]>([]); //<-- provide an initial value here
totalCostSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here
lastTotalCostSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here
getId(myIndex: number) {
this.carrierSubject.next(myIndex);
}
setOrders(value) {
console.log(value);
this.orderSubject.next(value);
}
setTotalCost(value) {
this.totalCostSubject.next(value);
}
lastSetTotalCost(value) {
this.lastTotalCostSubject.next(value);
}
}
从'@angular/core'导入{Injectable};
从“rxjs”导入{BehaviorSubject}//如果您从未调用服务中的任何set
er方法(逻辑中带有next
的方法)不会发出任何值。如果要在执行新订阅时接收主题的当前值,请使用BehaviorSubject
而不是Subject
在订阅数据之前下一步查看数据,如果订阅数据时没有可用数据,则应使用BehaviorSubject或ReplySubject解决此问题(1) 。你能给我举个例子吗?我不知道如何在服务中定义behaviorSubject。我以前从未使用过,这需要我的论证,那么我应该在这个行为主题中传递什么呢?例如,我成功地按行为主题(emailSubject=new behaviorSubject(“”;)获取电子邮件。其他人呢?他们给了我错误消息(品牌未定义)