发送消息后的 NativeScript 空文本字段

问题描述

html：

<StackLayout  class="nt-form chat-wrapper"  >
    <StackLayout loaded="test" id="chat-form" orientation="horizontal" class="nt-input input-field form">
  
   <TextField  
    (textChange)="onTextChange($event)" 
    [text]="inputText"
    width="800px"  
    class="-rounded-lg input" 
    hint="Nachricht" 
    style="background-color: #ffffff;"
></TextField>
        <button width="120px" class="-rounded-lg fa far fas fab" (tap)="sendMessage();" style="margin-left: 15px;" text="&#xf1d8;"></button>
    </StackLayout>
</StackLayout>

ts：

@Component({
    selector: "ItemDetail",styleUrls: ['item-detail.component.css'],templateUrl: "./item-detail.component.html",providers: [DatePipe]
})
export class ItemDetailComponent implements OnInit {
inputText;
constructor(){}
ngOnInit(): void{}

sendMessage(){
        if(this.text == undefined){
            console.log("Sie haben keine Nachricht eingetippt");
        }else{
            this.clearText();
            this._chatService.addMessage(this.id,this.text,this.me);
            
        }
    }

clearText(){
        if(this.inputText != ""){
            this.inputText = "";
        }else{
            console.log("Die nachricht ist schon leer")
        }
    }
}

当我第一次发送消息时，文本被清除。但之后它仍然发送文本但它不会删除文本字段中的消息。

第一次点击：

第二次点击：

它仍然发送消息，但它保留在 TextField 框中

解决方法

我发现始终有效的另一种清除方法是直接设置 TextField 的 text 属性。

<TextField #TextField>
  ...

@ViewChild('TextField') textField: ElementRef;


clearText(): void {
  // keep this line as you are using it for sendMessage()
  this.inputText = "";

  // clear the textfield
  (<TextField>this.textField.nativeElement).text = "";
}