Question

的mypage.html

    <ion-content class="backgray"
             #content>
  <ion-list>
    <ion-item no-lines
              *ngFor="let msg of msglist">
      <div class="chat-message"
           text-right
           *ngIf="msg.userpk == mypk">
        <div class="right-bubble">
          <p class="msg-date">{{msg.createDate}}</p>
          <span text-wrap>{{msg.content}}</span>
        </div>
      </div>
      <div class="chat-message"
           text-left
           *ngIf="msg.userpk !== mypk">
        <div class="left-bubble">
          <p class="msg-date">{{msg.createDate}}</p>
          <span> <span class="message"
                text-wrap>{{msg.content}}</span>


        </div>
      </div>
    </ion-item>
  </ion-list>
</ion-content>
<ion-footer>
  <ion-grid>
    <ion-row>
      <ion-col col-10>
        <ion-input type="text"
                   placeholder="Type a message"
                   name="message"
                   [(ngModel)]="sendmsg"></ion-input>
      </ion-col>
      <ion-col col-2
               (click)="sendmessage()">
        <ion-icon name="paper-plane"></ion-icon>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

mypage.ts

ionViewDidLoad() {
  this.setmsglist()
  }
  setmsglist(){
    this.msglistsync()
    this.storage.get(this.talk).then((msglist) =>{
      if(msglist != null){
      this.msglist = msglist
    }
    })
  }    

ionViewDidEnter(){
    let dimensions = this.content.getContentDimensions();
    this.content.scrollTo(0, dimensions.contentHeight,0);
    this.scroll=true;

    this.fcm.onNotification().subscribe(data => {
      if(!data.wasTapped){
          if(data['chat']===this.talk){
            alert('a')
            this.msglistsync()
          }
      }
    });
    }


      msglistsync(){
        alert('b')
        this.storage.get('token').then((token) => {
        alert('c')
          const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type':  'application/json',
            'Authorization': token
          })
        };
          var data = JSON.stringify({"receiveuser":this.receiveuser.pk})
          let link = this.link+'/create/chat'
          this.http.post(link,data,httpOptions)
          .subscribe(data => {
          alert('d')
          var msglist = data['msglist']
         this.msglist = this.msglist.concat(msglist)
         this.storage.set(this.talk,this.msglist)
         }, error => {
         alert("error")
         });
     });
  }

获取推送警报a b c d并更改msglist

但HTML msglist不会直接更改

触摸页脚后，它会发生变化。

我认为同步问题如何解决？

我的离子信息

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.11.0
npm  : 5.6.0 
OS   : macOS High Sierra

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

Answer 1

我认为这是由于后期服务调用完成后台线程所以你需要在主线程上刷新你的数据尝试下面的代码：

import { Component, NgZone } from '@angular/core';

let self = this;
this.zone.run(() => {
     alert('d')
     var msglist = data['msglist']
     this.msglist = this.msglist.concat(msglist)
     this.storage.set(this.talk,this.msglist)
});

this.zone.run()将在主线程上更新您的数据。

订阅中的离子框架调用函数

1 个答案: