Ionic 4 提交后不隐藏键盘答案

【问题标题】：Ionic 4 doesn't hide the keyboard after submitIonic 4 提交后不隐藏键盘
【发布时间】：2019-09-10 09:59:34
【问题描述】：

我将 Ionic 3 应用程序迁移到 Ionic 4。问题是当我按下键盘上的 go 按钮时，它并没有关闭它。这是我在前端的代码：

    <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 应用程序中，这运行良好。

有人能指出我正确的方向吗？

【问题讨论】：

标签： android angular typescript cordova ionic-framework

【解决方案1】：

查看this bug report 和this one。

尝试将(keyup.enter)="calculateTwo(value1, value2)" 放在要在输入事件上运行的每个输入上。

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

文档here

【讨论】：