将 jQuery 更改为 ionic答案

【问题标题】：Changing jQuery to ionic将 jQuery 更改为 ionic
【发布时间】：2018-05-05 15:37:52
【问题描述】：

所以我最初有这段 jQuery 代码，工作得非常好：

<input type="text" value="name-var"/>

$("input").keydown(function(e) {
    var oldvalue=$(this).val();
    var field=this;
    setTimeout(function () {
        if(field.value.indexOf('name-var') !== 0) {
            $(field).val(oldvalue);
        } 
    }, 1);
});

我的任务是用 ionic angular 编写这段代码，由于我在这方面非常非常陌生，所以我遇到了一些麻烦。这是我到目前为止所拥有的：

 @Page({
      template: `
        <ion-content>
           <input 
              #orderCommentInput 
              (ngModelChange)="check()" 
              type="text" 
              [(ngModel)]="comment"
            />
         </ion-content>
      `  
    })

  class Page1 {
      @ViewChild('orderCommentInput') orderCommentInput;
      name = "123sdfgfhd4";
      comment = '' + this.name
      check() {
        orderCommentInput.addEventListener("keydown"(function(e){
          var oldvalue = this.name.val();
          var field=this;
          setTimeout(function(){
            if(field.value.indexOf('name') ! == 0) {
              field.val(oldvalue)
            }
          }, 1)
        })

        console.log(this.comment, this.orderCommentInput)
      }

谁能解释我在将它从 jQuery 转移到 ionic 时做错了什么？如果这看起来很简单或者我在做一些愚蠢的事情，我很抱歉，我很新，只是要求一些解释。

【问题讨论】：

标签： jquery angularjs ionic-framework

【解决方案1】：

使用<input> 使用<ion-input (keydown)='change()'>。我猜您正在尝试更改其他一些输入值，所以我要做的是在该输入上设置一个 [(ngModel)]，然后在 change 方法中修改它的值，如下所示：

class Page1 {
  @ViewChild('orderCommentInput') orderCommentInput;
  changedValue: String = '';
  name = "123sdfgfhd4";
  comment = '' + this.name
  check() {
      setTimeout(function(){
        //I don't know what you need the timer for
        this.changedValue = this.name
      }, 1)

    console.log(this.comment, this.changedValue)
  }

  @Page({
  template: `
    <ion-content>
       <ion-input 
          #orderCommentInput 
          (keydown)="check()" 
          type="text" 
          [(ngModel)]="comment"
        />
        <ion-input  
          type="text" 
          [(ngModel)]="changedValue"
        />

     </ion-content>
  `  
})

【讨论】：