如何在IONIC 3上实现好友列表的"is typing"功能？

Question

我有一个正在使用 IONIC 3.19.0 和 ANGULAR 5.0.3 的聊天应用程序。但是我一直卡在好友列表中 "is typing" 功能的实现上。

所以，我想确定一下，当朋友写的时候，"is typing" 可以放在那个地方。

但在家里正好相反，当一个朋友写的时候，"is typing"海报同时给其他人。

我需要解决方案，我正在等待您的答复。

这是我的代码：

Chat.ts

constructor(....) {

this.socket.connect();     
this.socket.on('update-typing', function (data) {
    if (data != null) {
      if (data.message == "typing") {
        this.typing = true;
      } else {
        this.typing = false;
      }
    }
}.bind(this)); }

Chat.html

<ion-content #content class="list-avatar-page"> 
 <ion-list>
<ion-item *ngFor="let c of messageDetails; let i = index;let lst = last;let fst = first;" (click)="userClicked($event, c)">
  <ion-avatar item-start>
    <img src="{{c.avatar}}">
  </ion-avatar>
  <h2>{{c.username}}</h2>
  <h3 *ngIf="!typing">{{c.lastMessage}}</h3>
  <p *ngIf="typing">is typing...</p>
  <ion-note item-end>{{timeStamp(c.lastactivity)}}</ion-note>
</ion-item>

Here is my friend list

Here is my friend list when writing to someone

Answer 1

所以我们这里有一个范围问题。

this.typing 是整个组件的范围。

你想要的是给 messageDetails 添加一个值。

那么你可以这样做：this.messageDetials[i].typing = true 其中 i 是该用户的您的 ID。

现在在你的模板中可以做到*ngIf=c.typing。

Answer 2

我刚刚做到了，pingo！有效！！！

Chat.ts

this.socket.connect();
this.socket.on('update-typing', function (data) {

  for (let index = 0; index < this.messageDetails.length; index++) {
    if (this.messageDetails[index].userid == data.userId) {
      if (data != null) {
        if (data.message == "typing") {
          this.messageDetails[index].istyping = true;
        } else {
          this.messageDetails[index].istyping = false;
        }
      }
    } else {
      this.messageDetails[index].istyping = false;
    }

  }

}.bind(this));

Chat.html

<ion-content #content class="list-avatar-page"> <ion-list>
<ion-item *ngFor="let c of messageDetails; let i = index;" (click)="userClicked($event, c)">
  <ion-avatar item-start>
    <img src="{{c.avatar}}">
  </ion-avatar>
  <h2>{{c.username}}</h2>
  <h3 *ngIf="!c.istyping">{{c.lastMessage}}</h3>
  <p *ngIf="c.istyping">écrit...</p>
  <ion-note item-end>{{timeStamp(c.lastactivity)}}</ion-note>
</ion-item>

非常感谢！

如何在IONIC 3上实现好友列表的"is typing"功能？

How to implement "is typing" function in the friend list on IONIC 3?

javascript

typescript

ionic2

ionic3

angular