javascript - 主题不发出数据

Question

我有一个应用程序可以从用户那里接收数据并在表单中验证它们。当验证为真时，按钮将被启用并且用户被允许在这种情况下提交他的订单。

我不知道为什么在这个组件中我的主题不起作用。我的意思是我可以在组件中使用 .next(value)，在服务中我可以使用 console.log(value) 检查它是否到达服务。

我可以看到正在接收服务，但是接收到的值没有在我想使用它们的组件中订阅。我停止运行项目但无法修复。这是我尝试过的:

AuthService.ts

  emailSubject=new Subject<string>();
  getEmail(value)
  {
    console.log(value);
    this.emailSubject.next(value); //prints email to the console correctly
  }

CarService.ts

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);
   }

CarPayment.ts

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);
    }
}

Answer 1

正如@lealceldeiro 和@FatemeFazli 所提到的，您需要使用BehaviorSubject 或ReplaySubject。您的代码不起作用的原因是因为您的可观察对象尚未触发任何值(value)。本质上，当您执行 .subscribe 时，您正在 Hook 更改事件。但就您而言，更改尚未触发。

AuthService.ts

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
  }
}

CarService.ts

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);
  }
}