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

Question

我有一个聊天应用程序，我正在研究IONIC 3.19.0和ANGULAR 5.0.3。但是我坚持在我的朋友列表中实现"正在打字"功能。

所以，我想确保，当一个朋友在写作时，"正在打字"可以放在那个地方。

但在家里正好相反，当一个朋友写信时，所有其他人同时发出"正在打字"的海报。

我需要解决方案伙计们，我在等待你的答案。

这是我的代码：

聊天网

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)); }

聊天.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>

这是我的朋友列表

这是我写信给某人时的朋友列表

Answer 1

所以我们在这里遇到的是一个范围问题。

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

您想要的是向消息详细信息添加一个值。

然后你可以做：this.messageDetials[i].typing = true其中 i 是该用户的 ID。

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

Answer 2

我只是这样做了，然后pingo！它适用于!!

聊天网

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));

聊天.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>

谢谢！