无法在 Angular 的视图中显示 BehaviorSubject 变量答案

【问题标题】：Cannot Show BehaviorSubject Variable in view in Angular无法在 Angular 的视图中显示 BehaviorSubject 变量
【发布时间】：2022-07-15 23:46:23
【问题描述】：

我已经创建了这个服务

服务文件：

InfoDetails=new BehaviorSubject<any>('');

getsInfo(data: any): Observable<any> {
    return this.http.post<any>(`${environment.url}/Info`, data)
}

在组件 1 中：

 ngOnInit(): void {
    this.getInfo(this.UserId);
 }
 InfoList: any;
 getInfo(userId)
  { 
  this.Service.getsInfo(json).subscribe(data => {
  if (data.response == 200) {
    this.InfoList = data.response;

    let jsons=[
      {
          "Id": 2,
          "Name": "Test",
          "Email": "test@gmail.com",
          "Code": 4346
      },
      {
          "Id": 2,
          "Name": "Test",
          "Email": "test1@gmail.com",
          "Code": 4346
      }
     ];

    this.Service.InfoDetails.next(jsons);
   
  }
})
  }

在组件 2 中：

 let jsons=[
          {
              "Id": 4,
              "Name": "Test 1",
              "Email": "test1@gmail.com",
              "Code": 43246
          },
          {
              "Id": 67,
              "Name": "Test 3",
              "Email": "test33@gmail.com",
              "Code": 3336
          }
         ];

    this.ChatService.chatInfoDetails.next(jsons);

问题是我将如何循环遍历component 2 中的变量，以便如果变量值发生更改，它应该立即自动反映在组件中而无需刷新页面。

任何建议都非常感谢谢谢

【问题讨论】：

为什么要遍历jsons？订阅 ChatService 并在获得下一个值时呈现。
@Prajwal 你能在回答中举一些例子吗
我不确定您到底想做什么。如果您尝试聆听服务的更改，那不是您应该这样做的方式。您从哪里获得 jsons 价值？它看起来是静态的。

标签： angular typescript observable behaviorsubject

【解决方案1】：

当你想在 HTML 中呈现时，你可以这样做。

为主题添加一个吸气剂。但我强烈建议您将主题转换为可观察对象，如下所示。

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class ChatService {
  InfoDetails = new BehaviorSubject<any>('');
  InfoDetailsObservable$: Observable<any>;

  getsInfo(data: any): Observable<any> {
    return this.http.post<any>(`${environment.url}/Info`, data);
  }
  constructor() {
    this.InfoDetailsObservable$ = this.InfoDetails.asObservable();
  }
}

然后在组件 2 中，您可以如下创建 getter。

get infoDetails() {
    return this.ChatService.InfoDetailsObservable$;
}

最后在组件 2 html 中，您需要使用异步管道并呈现行为主题的最新值！

<section class="row">
  <div class="col-md-1">
    <pre *ngIf="!(infoDetails | async)">loading objectives...</pre>
    <span *ngFor="let test of infoDetails | async">{{ vehicle.Name }}</span>
  </div>
</section>

【讨论】：