The Angular2 view is failing to display updated data from a shared service

Question

The Angular2 view is failing to display updated data from a shared service

I've been struggling to show data from my shared service, but it's not displaying. Can someone please help me out? I've been stuck on this for the past few days. I've tried NgZone and ChangeDetectorRef, but they haven't worked for me.

home.component.html

<div *ngFor="let order of orders " class="order-cards">
    <div class="order-card">
        <div class="btn-order-card">
            <button type="submit" class="btn btn-success " (click)="viewOrder(order)">View the Order </button>
        </div>
    </div>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';


import { SharedService } from '../services/shared.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor( private route: Router, private sharedService: SharedService) { }

  ngOnInit() {
  }

  viewOrder(order) {
    this.route.navigate(['../view-order'])
    this.sharedService.viewOrderValues(order);
  }
  
}

shared.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

Injectable()

export class SharedService {
    constructor() { }
    private viewOrderSource = new Subject<any>();

    viewOrder$ = this.viewOrderSource.asObservable();

    viewOrderValues(data: any) {
        this.viewOrderSource.next(data);
        return data;
    }
}

view-order.component.ts

import { Component, OnInit } from '@angular/core';

import { SharedService } from '../services/shared.service';

@Component({
  selector: 'app-view-order',
  template: '{{orderValues}}',
  styleUrls: ['./view-order.component.scss']
})
export class ViewOrderComponent implements OnInit {
  orderValues: any;
  constructor(private sharedService: SharedService) {
  }
  ngOnInit() {
    this.sharedService.viewOrder$.subscribe((data) => {
      this.orderValues = data;
    });
  }
}

javascript angular typescript rxjs angular2-template

Answer 1

Answer №1

I believe your current method is not correct.

It would be better to utilize the routing-based Resolve approach and pass the parameter as an ID to the component, enabling you to retrieve the data upon component loading.

To implement this, modify your shared.service.ts to support ID-based search:

@Injectable()
export class SharedService {
  private orders = [];  // initialize or fetch from service, I'm not sure
  ordersChanged = new Subject<any[]>();

  constructor() { }

  addOrder(order: any) {
    this.orders.push(order);
    this.ordersChanged.next(this.getOrders());
  }

  getOrders(): any[] {
    return this.orders.slice();
  }

  getOrder(id: number) {
    // Your logic to find the order based on the ID
    return this.orders[id];
  }
}

In your home.component.html:

<div *ngFor="let order of orders; let i = index" class="order-cards">
    <div class="order-card">
        <div class="btn-order-card">
            <button 
                type="submit"
                class="btn btn-success"
                (click)="viewOrder(i)">View the Order</button>
        </div>
    </div>
</div>

And make corresponding changes in your home.component.ts:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  orders: string[];
  subscription: Subscription;

  constructor(private route: Router, private sharedService: SharedService) { }

  ngOnInit() {
    this.orders = this.sharedService.getOrders();
    this.subscription = this.sharedService.ordersChanged.subscribe(orders => this.orders = orders);
  }

  viewOrder(index: number) {
    this.route.navigate(['/view-order', index])
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

You can create an OrderResolver service:

@Injectable()
export class OrderResolver implements Resolve<any>{
    constructor(private sharedService: SharedService) { }

    resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): string | Observable<string> | Promise<string> {
        const id = +route.params['id'];
        return this.sharedService.getOrder(id);
    }

}

After injecting a Router, you can handle scenarios where there is no order for the provided ID easily using the above code snippet.

In your routing module class, update the view-order path to accept an ID parameter and use a resolver to fetch the order during route loading:

  {
    path: 'view-order/:id',
    component: ViewOrderComponent,
    resolve: { order: OrderResolver }
  }

Lastly, in your ViewOrderComponent:

export class ViewOrderComponent implements OnInit {
  orderValues: any;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.orderValues = this.route.snapshot.data['order'];
  }
}

Answer 2

I believe your current method is not correct.

It would be better to utilize the routing-based Resolve approach and pass the parameter as an ID to the component, enabling you to retrieve the data upon component loading.

To implement this, modify your shared.service.ts to support ID-based search:

@Injectable()
export class SharedService {
  private orders = [];  // initialize or fetch from service, I'm not sure
  ordersChanged = new Subject<any[]>();

  constructor() { }

  addOrder(order: any) {
    this.orders.push(order);
    this.ordersChanged.next(this.getOrders());
  }

  getOrders(): any[] {
    return this.orders.slice();
  }

  getOrder(id: number) {
    // Your logic to find the order based on the ID
    return this.orders[id];
  }
}

In your home.component.html:

<div *ngFor="let order of orders; let i = index" class="order-cards">
    <div class="order-card">
        <div class="btn-order-card">
            <button 
                type="submit"
                class="btn btn-success"
                (click)="viewOrder(i)">View the Order</button>
        </div>
    </div>
</div>

And make corresponding changes in your home.component.ts:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  orders: string[];
  subscription: Subscription;

  constructor(private route: Router, private sharedService: SharedService) { }

  ngOnInit() {
    this.orders = this.sharedService.getOrders();
    this.subscription = this.sharedService.ordersChanged.subscribe(orders => this.orders = orders);
  }

  viewOrder(index: number) {
    this.route.navigate(['/view-order', index])
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

You can create an OrderResolver service:

@Injectable()
export class OrderResolver implements Resolve<any>{
    constructor(private sharedService: SharedService) { }

    resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): string | Observable<string> | Promise<string> {
        const id = +route.params['id'];
        return this.sharedService.getOrder(id);
    }

}

After injecting a Router, you can handle scenarios where there is no order for the provided ID easily using the above code snippet.

In your routing module class, update the view-order path to accept an ID parameter and use a resolver to fetch the order during route loading:

  {
    path: 'view-order/:id',
    component: ViewOrderComponent,
    resolve: { order: OrderResolver }
  }

Lastly, in your ViewOrderComponent:

export class ViewOrderComponent implements OnInit {
  orderValues: any;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.orderValues = this.route.snapshot.data['order'];
  }
}

Answer 3

Answer №2

modification

modify the declaration of viewOrderSource to use a BehaviorSubject with an initial value of null:

replace

private viewOrderSource = new Subject<any>();

with

private viewOrderSource = new BehaviorSubject<Object>(null);

inside shared-seriice.ts

Answer 4

modification

modify the declaration of viewOrderSource to use a BehaviorSubject with an initial value of null:

replace

private viewOrderSource = new Subject<any>();

with

private viewOrderSource = new BehaviorSubject<Object>(null);

inside shared-seriice.ts

Answer 5

Answer №3

To ensure Angular detects changes, you need to update the list by creating a copy of the data. Simply resetting the data won't trigger the change detection.

For arrays, use: this.arrayName = this.arrayName.slice(); For objects, use: var newObj = Object.assign({}, oldObj)

Answer 6

To ensure Angular detects changes, you need to update the list by creating a copy of the data. Simply resetting the data won't trigger the change detection.

For arrays, use: this.arrayName = this.arrayName.slice(); For objects, use: var newObj = Object.assign({}, oldObj)

Answer 7

Answer №4

Attempt to perform the following actions:

this.sharedService.displayOrderDetails(order);
this.router.navigate(['../order-details'])

It seems like you are initiating navigation first, which prevents the function from executing and as a result, your observer is not triggered.

Answer 8

Attempt to perform the following actions:

this.sharedService.displayOrderDetails(order);
this.router.navigate(['../order-details'])

It seems like you are initiating navigation first, which prevents the function from executing and as a result, your observer is not triggered.

Answer 9

Answer №5

In the home.component.html file, there is a reference to a variable called "orders". However, this variable is not defined in the home.component.ts file. One way to solve this issue is by saving the data returned from your service as an instance variable and then referencing it in your HTML code.

Alternatively, you can directly bind to the observable returned by your service in the HTML file.

Answer 10

In the home.component.html file, there is a reference to a variable called "orders". However, this variable is not defined in the home.component.ts file. One way to solve this issue is by saving the data returned from your service as an instance variable and then referencing it in your HTML code.

Alternatively, you can directly bind to the observable returned by your service in the HTML file.

The Angular2 view is failing to display updated data from a shared service

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to retrieve the value of a textbox in AngularJS?

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

The mysterious case of the missing currentUserObj in Angular with rxjs Subject

An application running on Node.js/Express and hosted on Digital Ocean encounters the "Cannot get /" error message

Efficiently uploading images with AJAX when submitting a form

Is it possible to configure Nginx mime types within a Docker container?

I am unable to modify values using ngModel

AngularJS - Setting an initial delay for ng-bind

Passing a variable to a modal in AngularJS

Expand the initial expansion panel within an Angular Material accordion by opening the first attachment

Troubleshooting issues with Firebase integration in a Node.js environment

What is the best way to identify which JavaScript code is triggering or managing an event?

Mastering the Art of Modifying HTML with Node.js

What is causing my Bootstrap Controls to malfunction?

Is it possible for me to reconstruct the "reducer" each time the useReducer hook is rendered?

Trouble with firing the click event using document.createElement('a') in Firefox

Customize the text for the material icon

Adding to and retrieving data from an array

Utilize AngularJS to refine and sort through data retrieved from an API