The tally remains stagnant despite modifications being made

Question

The tally remains stagnant despite modifications being made

I made a modification to the default .NET Core SPA template by adding a menu item in the nav-menu.component.html file like this:

<li [routerLinkActive]='["link-active"]'>
    <a [routerLink]='["/fetch-data"]' (click)='collapse()'>
        <span class='glyphicon glyphicon-th-list'></span> Requests ({{count}})
    </a>
</li>

This displays the count of requests fetched from the server inside the parentheses. I initialized the count in my TypeScript file as follows:

export class NavMenuComponent {

count: number;

constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {

var url = this.baseUrl + "api/request/TheCount/";
this.http.get<number>(url).subscribe(result => {
  this.count = result;
}, error => console.error(error));

}

The TheCount method simply retrieves the count of requests from the server like this:

[HttpGet("TheCount")]
public async Task<IActionResult> TheCount()
{
    var count = await GetRequestsCount();

    return new JsonResult(count, new JsonSerializerSettings()
    {
        Formatting = Formatting.Indented
    });
}

Everything is working correctly and the count is displayed as expected inside the parenthesis. However, the issue arises when a request is deleted from another component, the count variable in the nav-menu.component isn't updated automatically. This means that I have to refresh the site in order to see the updated count again. Is there a way to automatically update the count after changes?

c#angular typescript asp.net-core-2.2

Answer 1

Answer №1

This is just a sample template.

import { Injectable, EventEmitter } from '@angular/core';
                import { BehaviorSubject, Observable } from 'rxjs';
                import { HttpHeaders, HttpClient } from '@angular/common/http';

                @Injectable()
                export class CountService {

        count: number;

          public observalbleCount: BehaviorSubject<number>;


                  constructor(
                    protected httpClient: HttpClient) {
        this.count= 0;
                    this.observalbleCount = new BehaviorSubject<number>(this.count);
                  }

                  getCount(): Observable<number> {

return new Observable((observer) => {

this.httpClient.get<number>(url).subscribe(result => {
                        this.count = result 
                        this.setCount(result);
                        observer.next(result);
                      }, error => console.error(error));
                      });



                  }

                  public setCount(data: number) {
        this.count=data;
                    this.observalbleCount.next(data);
                  }

                }

This is the actual component code.

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { CountService } from './';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class NavComponent implements OnDestroy {
    count: number;
    subscription: Subscription;

    constructor(private countService: CountService) {
        // subscribe to home component messages
        this.countService.GetCount().subscribe((data) => {
          this.count = data;
        });
this.subscription = this.countService.observalbleCount.subscribe((data) => {
          this.count = data;
        });
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }
}

Answer 2

This is just a sample template.

import { Injectable, EventEmitter } from '@angular/core';
                import { BehaviorSubject, Observable } from 'rxjs';
                import { HttpHeaders, HttpClient } from '@angular/common/http';

                @Injectable()
                export class CountService {

        count: number;

          public observalbleCount: BehaviorSubject<number>;


                  constructor(
                    protected httpClient: HttpClient) {
        this.count= 0;
                    this.observalbleCount = new BehaviorSubject<number>(this.count);
                  }

                  getCount(): Observable<number> {

return new Observable((observer) => {

this.httpClient.get<number>(url).subscribe(result => {
                        this.count = result 
                        this.setCount(result);
                        observer.next(result);
                      }, error => console.error(error));
                      });



                  }

                  public setCount(data: number) {
        this.count=data;
                    this.observalbleCount.next(data);
                  }

                }

This is the actual component code.

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { CountService } from './';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class NavComponent implements OnDestroy {
    count: number;
    subscription: Subscription;

    constructor(private countService: CountService) {
        // subscribe to home component messages
        this.countService.GetCount().subscribe((data) => {
          this.count = data;
        });
this.subscription = this.countService.observalbleCount.subscribe((data) => {
          this.count = data;
        });
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }
}

Answer 3

Answer №2

When making changes to the data, ensure that the count is always updated accordingly.

Integrate your code into the service layer.

this.http.get<number>(url).subscribe(result => {
  this.count = result;
}, error => console.error(error));

}

Implement a Subject or BehaviorSubject for a specific variable (count) within the service.

This way, any changes to the data will trigger the service method and update the count.

Answer 4

When making changes to the data, ensure that the count is always updated accordingly.

Integrate your code into the service layer.

this.http.get<number>(url).subscribe(result => {
  this.count = result;
}, error => console.error(error));

}

Implement a Subject or BehaviorSubject for a specific variable (count) within the service.

This way, any changes to the data will trigger the service method and update the count.

The tally remains stagnant despite modifications being made

Answer №1

Answer №2

Similar questions

Tips for creating a generic type that is versatile

Updating a SQL parameter to reference a foreign key

Unable to return to the initial page in Selenium using C#

Utilizing webpack to implement HTML loaders alongside Angular 2's built-in directives in lowercase

When submitting the form in Angular using Reactive Forms, the select dropdown may send a null value

How to make a dynamic Div tag using ASP.Net

What are the solutions to resolve this error in C# ASP LINQ?

"Troubleshooting Primeng's p-table filter issue when using an editable FormArray - encountering problems with the

Uh oh! An issue occurred: StaticInjectorError(AppModule)[UserformService -> HttpClient] - There seems

Managing Keyboard Input in React using TypeScript

What is the method for utilizing enum values as options for a variable's available values?

a dynamic assortment of serialized arrays in C#

Save the selected date from a date chooser onto a MySQL database

Guide on Building a Node with Neo4jClient in Neo4j Version 2

Utilizing Typescript for directive implementation with isolated scope function bindings

Enabling LinkButton in Asp.net after a delay of 10 seconds: A Step-by-

I'm looking to locate the API documentation for AngularJS TypeScript

Maintain the selected list item active using ngFor after it is clicked

"Encountering an issue with opening a form in a child component from the parent - receiving an error message 'unable to access

Problems encountered when utilizing $in operator in Mikro ORM MongoDB operations