Observable TextArea defaultValue 是 sendMessage SignalR & Typescript/angular 之后的空格

Question

我正在调整基本的 SignalR 聊天功能。

广泛的上下文：当用户发送消息时，消息被发送，但是空的文本区域（除了占位符）已经被发送，现在有一个 event.currentTarget.defaultValue，由大约 13 个空格组成的字符串。我尝试通过将其设置为 null 或 '' 来更正它，但空白仍然存在，隐藏了占位符（偏离路线）。

原始输入字段是一个字符串，在我的版本中，我为其创建了一个 behaviorSubject，并添加了一个该 behaviorsubject 的可观察对象

txtMessage: string = null; 
txtSubject: BehaviorSubject<string>;
txtStatus: Observable<string>;
this.txtSubject = new BehaviorSubject<string>(this.txtMessage);
this.txtStatus = this.txtSubject.asObservable();
this.txtStatus.subscribe(status => {
  if(status !== null && status.length)
    let senderid = this.userid;
    let receiverid = this.selectedChatFriend.id;
    let message = 'typing:' + senderid + ';receiver' + receiverid;
    this.chatService.startedTyping(message);
  }
  if(status == null  && this._selectedChatFriend !== null && this._selectedChatFriend !== undefined){
    let senderid = this.userid;
    let receiverid = this.selectedChatFriend.id;
    let message = 'nottyping:' + senderid + ';receiver' + receiverid;
    this.chatService.stoppedTyping(message);
  }      
});

问题：当用户发送消息时，接收者会收到通知。在发送第一条消息时，一切正常。在第一条消息之后，我得到的是空白而不是空文本区域，当这个用户再次开始输入时，isTyping 没有被触发，因为 'starttyping' 上的 ifstatement 没有预料到空白

textinputreceived(event: any){      
  if (event.currentTarget.value.length > 0 && event.inputType == "insertLineBreak"){      
  //event.preventDefault();
  this.sendTextMessage(event.currentTarget.value); 
  }
 
  //filter out anything that is not the txtMessage
  if(event.currentTarget.value.length == 1  && event.inputType == "insertText"){
  //user started typing     
  //triggers the isTyping
  this.txtSubject.next(event.data);    
  
  } else if (event.currentTarget.value == '' && event.inputType == "deleteContentBackward"){
  //user just deleted the only char in the message
  //triggers stopped typing
  this.txtSubject.next(null);
  }      
}

HTML:

<div class="type_msg">  
        <div class="input_msg_write">  
          <textarea type="text"  
                    id="chatbx"                     
                    placeholder="Type a message"
                    class="write_msg" 
                    [value]="txtMessage"                            
                    (input)="textinputreceived($event)"      
                    (keydown.enter)="sendTextMessage($event)">
          </textarea>  
          <button class="msg_send_btn" 
                  type="button"  
                  (click)="sendTextMessage($event)">
                  <i class="fa fa-paper-plane-o" aria-hidden="true">
                    <mat-icon style="color:black;margin-top:10px; font-size: 42px; margin-left: -45px;">send</mat-icon>
                  </i>
          </button>  
        </div>  
      </div>

以及发送消息的方法：

sendTextMessage(event: any): void {
this.message = new ChatMessage();    
if (this.selectedChatFriend) {
  this.message.messageReceiverId = this.selectedChatFriend.id;
}   
this.message.message = event.currentTarget.value;  
this.txtSubject.next(null);
event.currentTarget.value = null;  
this.txtMessage = null; 
this.message.messageSenderId = this.userid; 
this.message.type = "sent";  
this.message.timeStamp = new Date();      

if(this.message.messageReceiverId && this.message.message.length > 0){
  debugger; //hier pauze is al genoeg  om te werken :o      
  } 
this.chatService.sendMessage(this.message);    
}

发生了几件奇怪的事情：

一个。我只需要在退格键上按下 1 键即可删除空格（13 个字符），获取占位符并触发 isTyping。 -我尝试伪造 JQueryEvent 按键退格但没有得到结果。

B.If 我在 sendmessage 和 F10 上逐行进入浏览器调试模式，一切都按计划进行 -我试过设置延迟，重新整理代码的顺序，还是不是想要的结果

C.在我的 chat.html，用户输入消息的文本区域中，我有两种方法： (input)="textinputreceived($event) 和 (keydown.enter)="sendTextMessage($event)

if i remove (keydown.enter), if event.currentTarget.value.length > 0 && event.inputType == "insertLineBreak" 不会在第一次回车时触发，只有在我'我打了一个退格键，它被触发了（可能是因为那个空白默认值..但其他问题出现了:)

我对打字稿还不是最有信心，所以可能缺少一些基本概念（也许阅读一些关于线程的内容）。如果您知道如何解决这个问题，我很乐意听取您的意见！

我试过的其他随机事情：

尝试使用值绑定，尝试了 [] 和 [()]，

将文本区域更改为 div，但没有成功..

更新：经过一番挖掘并将所有内容都放在一行中，我设法将空格减少到 1 个字符.. 尝试操纵 DOM 将其删除，但还没有成功.. 对我来说最奇怪的是，这在我逐行调试时有效...

Answer 1

发现发生了什么！ (input)="textinputreceived($event)" 和 (keydown.enter)="sendTextMessage($event)"> 触发一个 'enter press'，所以在调试模式下，enterpress 被注册，文本被清除，消息被发送。如果不在调试中，enterpress 可能在该字段被清除后注册，因此出现空白。

简单的解决方案： event.preventDefault() 两种方法！

textinputreceived(event: any){      
if (event.inputType == "insertLineBreak"){      
event.preventDefault();    
}


sendTextMessage(event: any): void {
event.preventDefault();
//rest of logic
}

Observable TextArea defaultValue 是 sendMessage SignalR & Typescript/angular 之后的空格

Observable TextArea defaultValue is whitespace after sendMessage SignalR & Typescript/angular

observable

signalr

typescript

angular