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

Question

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 框中

Answer 1

清除它的另一种方法，我发现它一直有效，是直接设置 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 = "";
}

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

NativeScript empty Textfield after message is send

data-binding

textfield

nativescript