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

【问题标题】：Ionic view not getting update frequently for every changes of component property update对于组件属性更新的每次更改，离子视图都不会经常更新
【发布时间】：2018-04-10 21:49:58
【问题描述】：

我正在使用 ionic 3。我在更新视图中的库存数据时遇到问题。我可以在我的组件上经常获得更新，我可以在控制台中看到有关更改的信息，但不会在我的视图中更新这些更改。但我的观点是更新罕见的情况。如果组件中发生 10 次更新，则意味着我认为有 1 次更新。我编写了如下代码，服务：

@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>

但我的观点没有像在组件 baserates 字段中获得更新那样频繁更新。你能帮助任何人吗？我使用 Lightstreamer 来获取更新率。

【问题讨论】：

标签： angular ionic2 ionic3 angular2-services ionic4

【解决方案1】：

您可以使用 ChangeDetectorRef 来更新 UI。

一旦你在构造函数中收到来自 API 的响应，就添加依赖

constructor(private cd: ChangeDetectorRef) {}

然后一旦你收到回复就打电话

this.cd.markForCheck();

【讨论】：