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

Nested solution object populated with promises

Error encountered with TypeScript compiler when using a React Stateless Function component

Validation of multiple textboxes can be achieved by utilizing either JavaScript or Angular 1

React Hooks encountering issues with keydown/up events functionality

Access control using Vue.js Cookies

styled components are having issues with background gradients and opacity not functioning properly

Enhance your text in TextInput by incorporating newline characters with advanced editing features

Remove an item from an array in JavaScript by specifying its value, with compatibility for IE8

Passing input values from a parent component to a child component in Angular is not functioning as expected

Check if an object is already in an array before pushing it in: JavaScript

Tips on utilizing array filtering in TypeScript by solely relying on index rather than element callback

When combining AJAX with PHP and HTML, one limitation to note is that PHP alone cannot generate or create the file

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

When initiating a new browser window with JQuery, some data is not being transmitted

Sending parameters dynamically in AJAX chosen

What are some ways to prevent having to constantly check for the existence of an object within another object when working

Can Sequelize be used to perform queries based on associations?

Unveiling the mystery: Locating the position of an element within a multidimensional array using JavaScript or JQuery

Angular: utilizing input type="date" to set a default value

Create an interactive list with the ability to be edited using HTML and