如何在IONIC 3的朋友列表中实现“打字”功能？

Posted 2021-04-21

我有一个聊天应用程序，我正在使用IONIC 3.19.0和ANGULAR 5.0.3。但我坚持在朋友列表中实现“正在输入”功能。

所以，我想确保，当朋友写作时，“正在打字”可以放在那个。

但在家里却恰恰相反，当一位朋友写道时，所有其他人同时正在“打字”海报。

我需要解决方案的人，我在等你的答案。

这是我的代码：

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

答案

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

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

您想要的是为消息详细信息添加值。

然后你可以这样做：this.messageDetials[i].typing = true我在哪里，你是该用户的id。

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

另一答案

我刚刚那样做了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>

非常感谢你 ！