簡體   English   中英

提交后,Ionic 4不會隱藏鍵盤

[英]Ionic 4 doesn't hide the keyboard after submit

我將Ionic 3應用程序遷移到了Ionic4。問題是,當我按鍵盤上的“執行”按鈕時,它沒有關閉。 這是我在前端的代碼:

    <ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>2 variables</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content color="secondary" padding>
  <form (ngSubmit)="calculateTwo(value1, value2)">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label position="floating">value 1</ion-label>
            <ion-input name="value1" type="number" [(ngModel)]="value1"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label position="floating">Value 2</ion-label>
            <ion-input name="value2" type="number" [(ngModel)]="value2"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-button shape="round" expand="full" type="submit">calculate</ion-button>
  </form>
  <ion-card class="resultcard">
    <ion-card-header class="headercolor">
      Result
    </ion-card-header>
    <ion-card-content>
      {{result}}
    </ion-card-content>
  </ion-card>
</ion-content>

這是我的打字稿文件:

 calculateTwo(value1, value2) {
    this.result = "Result: " + (value1 * value2);
    this.keyboard.hide();
  }

我正在手機(Sony z2)上對其進行測試。 我可以移到下一個輸入字段,但是當我按GO時,它不會觸發calculateTwo函數。 鍵盤也不會隱藏。

這是我的package.json文件:

"dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/admob-free": "^5.4.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/keyboard": "^5.4.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "cordova-admob-sdk": "0.24.1",
    "cordova-android": "^8.0.0",
    "cordova-plugin-admob-free": "0.26.0",
    "cordova-plugin-ionic-keyboard": "2.1.3",
    "cordova-promise-polyfill": "0.0.2",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.3.1",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.14.2",
    "codelyzer": "~4.5.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },

在我的ionic 3應用程序中,這很好。

有人可以指出我正確的方向嗎?

查看此錯誤報告 報告

嘗試將(keyup.enter)="calculateTwo(value1, value2)"放在要在enter事件上運行的每個輸入上。

<ion-input 
    name="value1" 
    type="number" 
    [(ngModel)]="value1" 
    (keyup.enter)="calculateTwo(value1, value2)"
></ion-input>

...

<ion-input 
    name="value2" 
    type="number" 
    [(ngModel)]="value2" 
    (keyup.enter)="calculateTwo(value1, value2)"
></ion-input>

這里的文件

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM