Question

我正在使用离子3.我在更新视图上的库存数据时遇到问题。我可以在我的组件上经常更新，我可以在我的控制台中看到有关更改但不更新我视图中的更改。但我认为更新罕见的情况。如果在组件中发生10更新意味着更新进入我的视图。我写了如下代码，服务：

@Injectable()
export class MarketService{
fncallback:any;
stocks: string[][];
  constructor( ) {
    this.initStocks();
    this.subscribeStocks();
  }
subscribeStocks() {
        this.lsClient = new LightstreamerClient("http://localhost:8080", "WBSTOCKLIST_REMOTE");
        this.lsClient.connectionSharing.enableSharing("WBCommonConnection", "ATTACH", "CREATE");
        this.lsClient.connect();
        this.subscription = new Subscription("MERGE", this.itemNames, this.fieldNames);
        this.subscription.setDataAdapter("WBQUOTE_ADAPTER");
        this.subscription.addListener({
            onItemUpdate: (updateObject) => {
                var itemName = updateObject.getItemName();
                updateObject.forEachChangedField((fieldName, fieldPos, val) => {
                      var itemIndex = this.itemNames.indexOf(itemName);
                      var fieldIndex = this.fieldNames.indexOf(fieldName);
                      console.assert(fieldIndex != -1);
                      console.assert(itemIndex != -1);
                      this.stocks[itemName][fieldName] = val;
                });
                this.fncallback(this.stocks);
            }
        });
        this.lsClient.subscribe(this.subscription);
    }
    setcallback(fn){
      this.fncallback = fn;
    } 
}

我的组件代码如下，

export class MarketPage {
baserates:any;
  constructor(public marketService: MarketService) {
  }
  ionViewDidLoad() {
        console.log( 'ionViewDidLoad MatketPage' );
        this.marketService.setcallback((data)=>{
          this.baserates = data;
          console.log(this.baserates); //This update happens frequently
         });
    }

}

我的观点看起来像，

<ion-row class="light-border-btm align-items"  *ngIf="baserates">
      <ion-col col-3>Gold</ion-col>
      <ion-col col-3>{{ baserates['SPOT-GOLD']['bid'] }}</ion-col>
      <ion-col col-3>{{ baserates['SPOT-GOLD']['ask'] }}</ion-col>
      <ion-col col-3>H:{{ baserates['SPOT-GOLD']['high'] }}<br/>L:{{ baserates['SPOT-GOLD']['low'] }}</ion-col>
    </ion-row>

但是我的观点没有经常更新，因为在组件基础字段中获取更新。你能帮助任何人吗？我使用Lightstreamer进行更新。

Answer 1

您可以使用ChangeDetectorRef进行更新UI。

在构造函数中收到API的响应后，添加依赖

constructor(private cd: ChangeDetectorRef) {}

然后一旦收到回复，请致电

this.cd.markForCheck（）;

对于组件属性更新的每次更改，离子视图都不会经常更新

1 个答案: