如何在 Angular 10 中将数组转换为 Observable？答案

【问题标题】：How do I turn an array into an Observable in Angular 10?如何在 Angular 10 中将数组转换为 Observable？
【发布时间】：2020-11-30 11:16:25
【问题描述】：

我正在做一个来自 Gemini 比特币 websocket 的简单数据显示。我能够订阅 websocket 并在我的订阅函数中处理传入的消息。这一切都按预期工作。当我处理新消息时，dataFromMessages 会更改值。

下一步如何使 dataFromMessages 成为 Observable？

我知道它是否是 Observable，然后我可以在我的 html 中使用“| async”。或者我可以订阅 Observable。但我不知道如何使它成为可观察的。使用 or() 函数？

output.component.ts

import { Component, OnInit } from '@angular/core';
import { UserWebsocketService } from '../services/user-websocket.service';

export class OutputComponent implements OnInit{

  dataFromMessages;

  constructor(private websocket: UserWebsocketService){}

  ngOnInit(): void {
    this.websocket.connect('wss://api.gemini.com/v1/marketdata/btcusd')
    .subscribe(message => this.process_message(message));
  }

  process_message(message){
    // *** do processing here with incoming message object***
    
    this.dataFromMessages = processed_data;
  }
}

output.component.html

<table>
  <thead>
    <tr> <th>Bid</th> <th>Ask</th> </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataFromMessages">
      <td>{{ item.bid }}</td>
      <td>{{ item.ask }}</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

你不能只输入 yourdataFromMessage 作为 Observable 并使用来自 rxjs 的from() 方法吗？

标签： angular typescript observable angular-observable

【解决方案1】：

将dataFromMessages初始化为可观察；

dataFromMessages$: Observable<any>;

你可以使用 rxjs pipe 和 tap 操作符来代替订阅来实现魔法

 ngOnInit(): void {
   this.dataFromMessages$ = this.websocket.connect('wss://api.gemini.com/v1/marketdata/btcusd')
   .pipe(tap(message) => this.process_message(message));
}

并在process_message 方法中返回处理后的消息。

process_message(message){
   // *** do processing here with incoming message object***

   return processed_data;
}

并且在模板中使用异步管道来订阅和读取数据。

<tr *ngFor="let item of dataFromMessages$ | async">
  <td>{{ item.bid }}</td>
  <td>{{ item.ask }}</td>
</tr>

【讨论】：

我实际上只是在寻找更简单的答案“地图”而不是“点击”。谢谢！是否可以将一个传入的 Observable（websocket）拆分为多个 Observable？使用map()，我可以将我需要的所有数据放入dataFromMessages$.prices、dataFromMessages$.quantities等，并订阅顶层dataFromMessages$。有没有办法将它们拆分为单独的 Observable，以便它们可以分别更新 html 的不同部分？我可以使用 dataPrices$ = of(message.prices), dataQuantities$ = of(message.quantities) 从 map() 函数中设置每个 Observable 值吗？
是的，你可以试一试，让我知道它是否有效。

【解决方案2】：

你应该将你的 dataFromMessages 声明为你想要的类型的 observable。然后在 ngOnInit() 中使用管道内的 rxjs map() 运算符进行处理并返回它。在这里，您可以“正常”使用消息，并且在管道完成后，它将使用您在管道内使用的运算符转换为 observable。

然后在你的 HTML 中使用异步管道

<tr *ngFor="let item of dataFromMessages$ | async">
  <td>{{ item.bid }}</td>
  <td>{{ item.ask }}</td>
</tr>

dataFromMessages$: Observable<myDataType>;

ngOnInit(): void {
  dataFromMessages$ = this.websocket.connect('wss://api.gemini.com/v1/marketdata/btcusd').pipe(
    map(message => {

      // Do my quantum physics and message processing here

      return processed_data;
    })
  );
}

【讨论】：