当我们从一页更改为另一页时，库存率不显示 angular

Question

我们正在开发 angular 8 应用程序，该应用程序的主要部分是显示我们的商品价格。 使用 lightstreamer，我们推动了 URL 的费率。 一切正常，但我们从一个页面移动并返回到同一页面，费率没有到来。 只有我们手动刷新页面，费率才会开始显示。 我在下面给出了代码示例

ts文件：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { StockListService } from './stock-list.service';

@Component({
    selector: 'app-stock-list',
    templateUrl: './stock-list.component.html',
    styleUrls: ['./stock-list.component.css']
})
export class StockListComponent implements OnInit {

    itemNames = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
    fieldNames = ['stock_name', 'last_price', 'time', 'pct_change', 'bid_quantity', 'bid', 'ask', 'ask_quantity',
'min', 'max', 'ref_price', 'open_price'];

    /**
     * <code>stocks</code> is a matrix containing the stock values.
     * Rows represent stocks, while columns represent field values.
     * For example <code>stocks[0][1]</code> is the last_price of item1.
     */
    stocks: string[][];

    // ref is needed to refresh the service's clients when the stock matrix changes
    constructor(private service: StockListService, private ref: ChangeDetectorRef) {
        this.stocks = this.newTable();
    }

    ngOnInit() {
        this.service
            .subscribe(this.itemNames, this.fieldNames)
            .addListener({
                onItemUpdate: (updateObject) => {
                    const itemName = updateObject.getItemName();
                    updateObject.forEachChangedField((fieldName: string, fieldPos: number, val: string) => {
                        const itemIndex = this.itemNames.indexOf(itemName);
                        const fieldIndex = this.fieldNames.indexOf(fieldName);
                        console.assert(itemIndex !== -1);
                        console.assert(fieldIndex !== -1);
                        this.stocks[itemIndex][fieldIndex] = val;
                    });
                    this.ref.detectChanges();
                }
            });
    }

    private newTable() {
        return new Array(this.itemNames.length)
            .fill(null)
            .map(() => new Array(this.fieldNames.length).fill('-'));
    }
}

服务文件

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

declare var LightstreamerClient: any;
declare var Subscription: any;
declare var StatusWidget: any;

@Injectable({
  providedIn: 'root'
})
export class StockListService {

  constructor() { }

  subscribe(items: string[], fields: string[]) {
        const subscription = new Subscription('MERGE', items, fields);
        subscription.setDataAdapter('QUOTE_ADAPTER');

        const lsClient = new LightstreamerClient(
            (document.location.protocol === 'https:' ? 'https' : 'http') + '://push.lightstreamer.com', 'DEMO');
        lsClient.connectionSharing.enableSharing('DemoCommonConnection', 'ATTACH', 'CREATE');
        lsClient.addListener(new StatusWidget('left', '0px', true));
        lsClient.connect();
        lsClient.subscribe(subscription);

        return subscription;
    }
}

html：

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Last</td>
            <td>Time</td>
            <td>Change</td>
            <td>Bid Size</td>
            <td>Bid</td>
            <td>Ask</td>
            <td>Ask Size</td>
            <td>Min</td>
            <td>Max</td>
            <td>Ref.</td>
            <td>Open</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of stocks">
            <td *ngFor="let field of row; let i=index" [class.leftAlign]="fieldNames[i] === 'stock_name'">
                {{field}}
            </td>
        </tr>
    </tbody>
</table>

Answer 1

确保使用最新版本的演示Lightstreamer-example-StockList-client-angular2更新为 Angular 8。