Asp.net核心＆amp; Angular 4 - 从客户端获取数据但视图未更新

Question

我按照本指南的说明操作： https://github.com/MarkPieszak/aspnetcore-angular2-universal#gotchas 从客户端快速预呈现我的应用程序。另外，我必须使用bitstamp服务来加载数据，我将服务包装在客户端代码中。像这样：

if (isPlatformBrowser(this.platformId)) {
      // Client only code.
      ...
   } 

事实上，在第一次加载时，我获得了数据并且视图已更新。但是，刷新页面后，数据仍然在控制台中加载，但视图不会呈现我的bitstamp服务（spinner图标永远运行）。这很奇怪，我甚至都不知道为什么以及我错在哪里。

以下是我的代码：

bitstamp.service.ts：

import Pusher from 'pusher-js';
import { Injectable, Inject, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/Rx';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';


@Injectable()
export class BitstampService {

  private _messages: BehaviorSubject<any> = new BehaviorSubject(null);
  public messages: Observable<any> = this._messages.asObservable();

  private pusher: any = undefined;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    console.log('BITSTAMP INIT');
    if (isPlatformBrowser(this.platformId)) {
      console.log('BITSTAMP INIT BROWSER');
      this.pusher = new Pusher('de504dc5763aeef9ff52');
      this.pusher.logToConsole = true;

      let channel = this.pusher.subscribe('live_trades');
      channel.bind('trade', (data) => {
        this._messages.next(data);
      });
    }
  }
}

比特币-rate.component.ts：

import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { BitstampService } from '../../services/bitstamp.service';
import { Subject } from 'rxjs/Subject';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Component({
  selector: 'app-bitcoin-rate',
  templateUrl: './bitcoin-rate.component.html',
  styleUrls: ['./bitcoin-rate.component.scss']
})
export class BitcoinRateComponent implements OnInit, OnDestroy {

  lastTrade: any;
  prevTrade: any;
  tradeDiff: any;

  private ngUnsubscribe: Subject<void> = new Subject<void>();

  constructor(
    private bitstamp: BitstampService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    this.lastTrade = null;
    this.prevTrade = null;
    this.tradeDiff = null;
  }

  calcTradeDiff() {
    if (this.prevTrade && this.lastTrade) {
      this.tradeDiff = this.lastTrade.price - this.prevTrade.price;
    } else {
      this.tradeDiff = null;
    }
  }

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.bitstamp.messages.takeUntil(this.ngUnsubscribe).subscribe(data => {
        if (data != null) {
          this.prevTrade = this.lastTrade;
          this.lastTrade = data;
          this.calcTradeDiff();
          //console.log(data);
        }
      });
    }
    if (isPlatformServer(this.platformId)) {
      // Server only code.
    }
  }

  ngOnDestroy() {
    if (isPlatformBrowser(this.platformId)) {
      this.ngUnsubscribe.next();
      this.ngUnsubscribe.complete();
    }
  }
}

查看模板：

<div class="container content-primary-dark">
  <div class="bitcoin-rate">
    <div class="row d-flex justify-content-center pt-2 pb-1 pl-lg-5 pl-md-2 pl-sm-5">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 col-6">
        <h5>Current price</h5>
        <p><span *ngIf="lastTrade"><i class="fa fa-dollar"></i>{{ lastTrade.price | number:'1.2-2' }}</span>
          <span *ngIf="!lastTrade"><i class="fa fa-spin fa-spinner"></i></span>
        </p>
      </div>          
    </div>
  </div>
</div>