将 jQuery 更改为 ionic

Posted 2023-05-09

【中文标题】将 jQuery 更改为 ionic

【英文标题】：Changing jQuery to 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 时做错了什么？如果这看起来很简单或者我在做一些愚蠢的事情，我很抱歉，我很新，只是要求一些解释。

【参考方案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>
  `  
)