为什么 Angular 服务的共享数据没有在 html 中更新？答案

【问题标题】：Why shared data of Angular Service is not being updated in the html?为什么 Angular 服务的共享数据没有在 html 中更新？
【发布时间】：2021-09-25 12:22:24
【问题描述】：

我正在使用一项服务在 02 个不相关的组件“home”和“results”之间共享一个数组。在我的interaction.service.ts 我有这个代码：

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

@Injectable({
  providedIn: 'root'
})

export class InteractionService {

  private _teacherMessageSource = new Subject<any>();
  teacherMessage$ = this._teacherMessageSource.asObservable();

  constructor() { }

  sendMessage(message: any){
    this._teacherMessageSource.next(message)
  }
}

"message" 是一个浮点数组，但我只是将其设置为任何值。当我在“home”组件中从后端得到响应时，我只是将它传递给 Servic 的 sendMessage() 函数：

this.http.post<any>("http://127.0.0.1:5000/", formData).subscribe(
      (response)=> {   
        
        console.log(response)  // array of floats   
        this._interationService.sendMessage(response);   

      },
      (error)=> console.log(error)
    )

然后在结果组件中我得到消息，我可以在控制台上打印它，但是当我将它影响到另一个数组“selectedMessage”以便在 HTML 中打印它时，它总是显示 null：


  public selectedMessage=[];

  constructor(public _interactionService: InteractionService, private http: HttpClient) { }

  ngOnInit(): void {
    this.getSpecialities();
    this._interactionService.teacherMessage$
      .subscribe(
          message => { 
            alert(message); // message is an array of floats and it shows normally with alert(message)
            this.selectedMessage = message;
            //console.log(this.selectedMessage);
 
          }
      );
  }

我的html是：

<ul>
  <li><strong> SSI </strong>: {{selectedMessage[0]}}</li>
  <li> <strong>RSD</strong>:{{selectedMessage[1]}}  </li>
  <li><strong>IL</strong>: {{selectedMessage[2]}}</li>
  <li><strong>MIV</strong>:  {{selectedMessage[3]}}</li>
  <li><strong>SSI</strong>: {{selectedMessage[4]}}</li>
  <li><strong>BIGDATAA</strong>: {{selectedMessage[5]}}</li>
  <li><strong>BIOINFO</strong>: {{selectedMessage[6]}} </li>
</ul>

但页面中什么也没有显示：

请问可能是什么问题？

【问题讨论】：

用new BehaviorSubject<any>(null) 实例化_teacherMessageSource 是否有效？
哦，它有点工作！我不知道为什么我在 selectedMessage[0] 中获取数组的所有元素，但其他元素是空的
这只是数据模型的变化。你没有得到你认为你从 API 得到的东西。相应地调整。真正的问题是延迟订阅（您在数据到达后订阅）。这就是为什么使用行为主题可以解决它的原因。
@Stavm 非常感谢，我设法解决了它。我真的很感激谢谢。你可以回答这个问题，如果你愿意，我可以接受！

标签： javascript html angular components share

【解决方案1】：

问题是您的 html 正在呈现同步数据，而在组件中您提供异步数据（即使在 ngOnInit 中）。简单的解决方法是将 *ngIf 放在您的列表中，并更好地将 selectedMessage 声明为正确的数组，但不要将其分配为空数组：

selectedMessage: selectedMessage[];

<ul *ngIf=selectedMessage>
  <li><strong> SSI </strong>: {{selectedMessage[0]}}</li>
  <li> <strong>RSD</strong>:{{selectedMessage[1]}}  </li>
  <li><strong>IL</strong>: {{selectedMessage[2]}}</li>
  <li><strong>MIV</strong>:  {{selectedMessage[3]}}</li>
  <li><strong>SSI</strong>: {{selectedMessage[4]}}</li>
  <li><strong>BIGDATAA</strong>: {{selectedMessage[5]}}</li>
  <li><strong>BIOINFO</strong>: {{selectedMessage[6]}} </li>
</ul>

【讨论】：

仍然显示没有值的同一页面：/但是当我在订阅时在控制台中打印它时，我得到了结果..
@Mounir 你的意思是你可以记录 //console.log(this.selectedMessage);或 //console.log(message);
两者都给出相同的结果，预期的数组

【解决方案2】：

您正在尝试访问可能不存在的异步数据。直接的解决方案是异步管道。

<ul>
  <li *ngFor="let msg of (interactionService.teacherMessage$ | async)">
    <strong> Something </strong>: {{msg}}
  </li>
</ul>

这样可以避免访问空数组
stackblitz 上的示例代码链接：https://stackblitz.com/edit/angular-12ziph?file=src/app/app.component.html

【讨论】：