时间戳

首页 > 解决方案 > 为什么 Angular 服务的共享数据没有在 html 中更新？

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

问题描述

我正在使用一项服务在 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)
  }
}

“消息”是一个浮点数组，但我只是将它设置为任何。当我在“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 中打印它时，它总是显示为空：


  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>

在此处输入图像描述 但页面中没有任何显示：

请问可能是什么问题？

标签： javascripthtmlangularcomponentsshare

解决方案

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

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

推荐阅读