Javascript 如何在HTML中使用rxjs显示动态更新

请找到下面的工作实例供您参考！

article个

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { BehaviorSubject, map, Observable, Subscription, interval } from 'rxjs';
import 'zone.js';
import { Stock } from './stock.model';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="card" *ngIf="stock$ | async as stockData">
      <div class="textBox">
        <div class="textContent">
            <div class="h1">{{stockData.name}}<div *ngIf="stockData.increased"
              style="color: green ; margin: 0 10px 0 10px; float: right;">▲</div>
            <div *ngIf="!stockData.increased" style="color: red ; margin: 0 10px 0 10px; float: right;">▼</div>
          </div>
        </div>
        <div class="detail">Price: $ {{stockData.price}} </div>
      </div>
    </div>
  `,
})
export class App {
  // private webSocket: WebSocket;
  public stock: Stock = new Stock();
  public stockSubject: BehaviorSubject<Stock> = new BehaviorSubject<Stock>(
    this.stock
  );
  public stock$: Observable<Stock> = this.stockSubject.asObservable();

  // this.webSocket = new WebSocket('ws://localhost:8080/stocks');
  // this.subscription = this.stock$.subscribe();

  ngOnInit() {
    interval(1000)
      .pipe(
        map(() => ({
          data: {
            name: 'Amazon',
            increased: Math.random() < 0.5,
            price: Math.floor(Math.random() * 100) + 1,
          },
        }))
      )
      .subscribe(this.onmessage);
  }

  onmessage = (event: any) => {
    this.stock = event.data;
    this.stockSubject.next(this.stock);
  };
}

bootstrapApplication(App);

stackblitz个