更改后计数不会更新

Question

我已将菜单项添加到默认的 .NET Core SPA 模板 nav-menu.component.html 文件中，如下所示：

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

它显示从括号内的服务器获取的请求数。我已经像这样在我的 ts 文件中初始化了计数：

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

}

而 TheCount 方法只是像这样从服务器获取请求的计数：

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

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

这很好用，并且按照预期显示了括号内的计数。但问题是，当我从另一个组件删除一个请求时，nav-menu.component 中的计数变量没有更新，所以我必须刷新站点才能再次获得刷新的计数。所以我的问题是，有什么办法，计数会在更改后自动刷新吗？

Answer 1

假设您 delete/add 应该更新计数。

您在服务中添加您的代码

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

}

然后对该服务的特定变量（计数）使用 Subject 或 BehaviorSubject

以便每当数据更改时，它都会调用服务方法和 return 计数

Answer 2

这是示例模板

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

                }

实际组件

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

更改后计数不会更新

The count is not updated after changes

c#

typescript

angular

asp.net-core-2.2