Attempting to transfer information between components via a shared service

Question

Attempting to transfer information between components via a shared service

Currently, I am utilizing a service to transfer data between components. The code snippet for my component is as follows:

  constructor(private psService: ProjectShipmentService, private pdComp: ProjectDetailsComponent) {

  }
  ngOnInit() {
    this.psService.getTDate().subscribe(x => this.cachedResults = x);
    this.populateArrays();

In this setup, the service looks like this:

 constructor(private service: DataService, private pInfo: ProjectDetailsComponent) {

    this.rProjectNumber = this.pInfo.rProjectNumber;
    this.rProjectSO = this.pInfo.rSalesOrder;
    this.entityUrl = this.pInfo.entityUrl;
    this.tDate = service.get<ShipDateFilterModel[]>(this.entityUrl);
   }

Although the tDate contains data within the service, when subscribing in the Component, the cachedResults variable remains empty when the service is called during the ngOnInIt lifecycle hook. What could be causing this issue?

javascript angular typescript angular7

Answer 1

Answer №1

How about implementing a method in the service:

fetchTodaysDate(){
return this.service.get<ShipDateFilterModel[]>(this.entityUrl);
}

Then, you can subscribe to it in your component:

this.psService.fetchTodaysDate().subscribe(result => this.cachedResults = result);

Answer 2

How about implementing a method in the service:

fetchTodaysDate(){
return this.service.get<ShipDateFilterModel[]>(this.entityUrl);
}

Then, you can subscribe to it in your component:

this.psService.fetchTodaysDate().subscribe(result => this.cachedResults = result);

Answer 3

Answer №2

Give this a try...

export class ProjectShipmentService {
  projectNumber;
  shipmentDate: Observable<ShipDateFilterModel[]>;
  entityUrl;
  salesOrder;

  constructor(private dataService: DataService, private projectInfo: ProjectDetailsComponent) {
    this.projectNumber = this.projectInfo.projectNumber;
    this.salesOrder = this.projectInfo.salesOrder;
    this.entityUrl = this.projectInfo.entityUrl;
   }

getShipmentDate(){
    return this.dataService.get<ShipDateFilterModel[]>(this.entityUrl);
}

Then in your component.

  ngOnInit() {
    this.shipmentService.getShipmentDate.subscribe(results => this.cachedResults = results);
    this.populateArrays();
  }

I hope this solution works for you :)

Answer 4

Give this a try...

export class ProjectShipmentService {
  projectNumber;
  shipmentDate: Observable<ShipDateFilterModel[]>;
  entityUrl;
  salesOrder;

  constructor(private dataService: DataService, private projectInfo: ProjectDetailsComponent) {
    this.projectNumber = this.projectInfo.projectNumber;
    this.salesOrder = this.projectInfo.salesOrder;
    this.entityUrl = this.projectInfo.entityUrl;
   }

getShipmentDate(){
    return this.dataService.get<ShipDateFilterModel[]>(this.entityUrl);
}

Then in your component.

  ngOnInit() {
    this.shipmentService.getShipmentDate.subscribe(results => this.cachedResults = results);
    this.populateArrays();
  }

I hope this solution works for you :)

Attempting to transfer information between components via a shared service

Answer №1

Answer №2

Similar questions

Forced line break at particular point in text

Unable to launch React Native project on emulator now

Angular2 module encounters failure when trying to inject InjectionToken using @Inject()

Unable to wrap the strings from the database in a span element

Fade out the jQuery message after a brief 2-second pause

Prevent deletion of already uploaded images in Blueimp by disabling the delete button

Removing a specific MySQL row using HTML in collaboration with Node.js

Ensuring the checkbox is disabled prior to editing

The curly braces in AngularJS are not resolving as expected, however, the ng-bind directive is functioning properly

Encountering a Typescript error when trying to pass a function as a prop that returns SX style

An error has occurred: sendEmail function is not defined

Imagine a scenario where your json_encode function returns API data that is already in JSON format. What would

What is the process for executing Express's scaffold by utilizing "nodemon" and the basic "node" command instead of relying on the "npm start" command?

React Typescript can easily differentiate between various prop types by selecting either of the two types

Inject parameter into MdDialog in Angular Material 2

When you want to place an image in the middle of a cell, you can easily achieve this by utilizing the addImage function

The Bar Graph Transition in d3 is Running Backwards

What is the best way to incorporate CDN into my webpack build process?

Set the variable value by clicking on another component within *ngFor in Angular 2

How to make a POST request with custom headers in NestJS