Блог

Я перенес свое приложение 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>
  

И это мой файл typescript:

  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)" каждый ввод, который вы хотите запустить при событии ввода.

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

Документация здесь