Angular 角度订阅了可观测但不刷新/更新

我正在为我的Angular应用程序设置通知功能

在标题中：

头在登录后只调用了一次，我有一个带有未读通知数量的徽章：

<button mat-icon-button>
    <mat-icon matBadge="{{unreadNotifications}}" matBadgeColor="red" matBadgeOverlap="true" matBadgePosition="below after">
        notifications
    </mat-icon>
</button>

通知可显示在通知页面中：

<div *ngFor="let notif of notifsBeforeRead" class="notif">
    <div class="notif-title">{{ notif.Subject }}</div>
    <div>{{ notif.Message }}</div>
    <div class="notif-date">{{ notif.Date | date : 'medium' }}</div>
</div>

和我的通知服务：

@Injectable()
export class NotifService {
  filterSubject = new Subject<any>();
  notifsCountSubject = new BehaviorSubject<any>(0);

  apply(params = null, filter: any) {
    const _resource = this.resource;
    let targetURL = `${this.resourceApply}`;

    if (params) {
      targetURL += `?${queryParams(params)}`;
    }

    this.getData(targetURL, filter).subscribe((res) => {
      this.filterSubject.next(res);
      console.log(res.data);
      let unreadNotifs = 0;
      res.data.forEach((notif) => {
        notif.attributes.forEach((attr) => {
          if (attr.name === 'Lu' && attr.value === false) {
            unreadNotifs += 1;
          }
        });
      });
      this.notifsCountSubject.next(unreadNotifs);
    });
  }

  getData(targetURL, filter) {
    this.resource = targetURL;
    return from(super.create(filter));
  }

  getAsyncFilter() : Observable<any> {
    return this.filterSubject.asObservable();
  }

  getAsyncNotifsCount(): Observable<any> {
    return this.notifsCountSubject.asObservable();
  }
}

但标题中的徽章未更新。我已经订阅了这个主题，当我使用.next（）时，所有订阅者都应该更新他们的数据，对吗

---

您能帮我一下吗，谢谢。

我们发现，问题是它是两个不同的服务实例，因为它位于模块的提供者和组件的提供者中，所以组件每次都有新的服务实例。

您是否使用ChangeDetectionStrategy.OnPush anywhere？否，以防万一，很难看到整个画面，但请尝试将cd:ChangeDetectorRef注入标头组件，并在getAsyncNotifsCount（）中使用此.cd.markForCheck（）.subscribe（（res）=>{那么，您确定标头组件中的值正在更新，而不是在html上呈现吗？在您的值应该更新之后，尝试“悬停”/“单击”标头中的标记，并检查它是否正在更新

notificationSub: Subscription;

this.notifService.apply({ collectionName: 'Links' }, myFilter);
this.notificationSub = this.notifService.getAsyncFilter()
  .subscribe((links) => {
    if (links.data && links.data.length) {
      // this.resultsLength = links.options.documents.total;
      this.resultsLength = 20;
      Array.prototype.forEach.call(links.data, (link) => {
        const notif = {};
        link.attributes.forEach((attr) => {
          notif['id'] = link._id;
          notif['attributes'] = link.attributes;
          link.attributes.forEach((att) => {
            notif[att.name] = att.value;
          });
        });
        if (Object.keys(notif).length) {
          notifications.push(notif);
        }
      });
    }
    this.notifsBeforeRead = notifications;
    this.notifications = _.cloneDeep(notifications);

  // Mark notifications as read
  this.updateReadNotif();
});

@Injectable()
export class NotifService {
  filterSubject = new Subject<any>();
  notifsCountSubject = new BehaviorSubject<any>(0);

  apply(params = null, filter: any) {
    const _resource = this.resource;
    let targetURL = `${this.resourceApply}`;

    if (params) {
      targetURL += `?${queryParams(params)}`;
    }

    this.getData(targetURL, filter).subscribe((res) => {
      this.filterSubject.next(res);
      console.log(res.data);
      let unreadNotifs = 0;
      res.data.forEach((notif) => {
        notif.attributes.forEach((attr) => {
          if (attr.name === 'Lu' && attr.value === false) {
            unreadNotifs += 1;
          }
        });
      });
      this.notifsCountSubject.next(unreadNotifs);
    });
  }

  getData(targetURL, filter) {
    this.resource = targetURL;
    return from(super.create(filter));
  }

  getAsyncFilter() : Observable<any> {
    return this.filterSubject.asObservable();
  }

  getAsyncNotifsCount(): Observable<any> {
    return this.notifsCountSubject.asObservable();
  }
}

this.notifsCountSubject.next(unreadNotifs); // unreadNotifs = 0