javascript - 错误 : Uncaught (in promise): overlay does not exist (ionic-selectable)

Question

我正在使用 ionic 可选包 github用于产品选择。在组件中打开 IonicSelectable 之前，我在控制台中遇到错误。

ERROR Error: Uncaught (in promise): overlay does not exist
    at resolvePromise (zone.js:831)
    at zone.js:741
    at rejected (tslib.es6.js:71)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)

我不明白提出这个问题的问题是什么。我已经按照 app.module.ts 中的说明使用了该软件包。

import { IonicSelectableModule } from 'ionic-selectable';
@NgModule({
  imports: [
    IonicSelectableModule
  ]
})
export class AppModule { }

在像这样的延迟加载模块中

import { IonicSelectableModule } from 'ionic-selectable';
import { HomePage } from './home';
@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    IonicSelectableModule
  ]
})
export class HomePageModule { }

这是我的模板

<ionic-selectable 
  #productListingComponent
  [isMultiple]="true"
  itemValueField="id"
  itemTextField="title"
  class="product_class"
  [items]="products"
  [canClear]="false"
  [isEnabled]="isEnable"
  [canSearch]="true"
  [canAddItem]="true"
  (onChange)="productChange($event)"
  (onOpen)="onOpen($event)"
  [addButtonText]="'Buttons.Add' | translate"
  [clearButtonText]="'Buttons.Clear' | translate"
  [closeButtonText]="'Buttons.Close' | translate"
  [confirmButtonText]="'Buttons.Confirm' | translate"
  [searchPlaceholder]="'Buttons.Search' | translate"
  (onAddItem)="addProduct($event.component)"
  #selectable>

<ng-template ionicSelectableHeaderTemplate>
      <ion-toolbar>
            <ion-buttons end>
                  <ion-button color="tertiary" fill="clear" (click)="productListingComponent.close()">
                  Cancel
                  </ion-button>
            </ion-buttons>
      </ion-toolbar>
      <ion-toolbar class="text-toolbar">
            <p> Some description</p>
      </ion-toolbar>
</ng-template>
<ng-template ionicSelectableCloseButtonTemplate>
      <p>Cancel</p>
</ng-template>
<ng-template ionicSelectableSearchFailTemplate>
      <div class="ion-padding">
            <p *ngIf="selectable.searchText; else noSearch">
                  No product available!
            </p>
            <ng-template #noSearch>
                  No product, go to your dashboard to add a new product!
            </ng-template>
      </div>
</ng-template>

</ionic-selectable>

在我的 package.json

{
  "name": "Ionic project",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/en.json ./src/assets/i18n/nl.json ./src/assets/i18n/fr.json ./src/assets/i18n/de.json --clean --sort --format json -m translatable"
  },
  "husky": {
    "hooks": {
      "pre-commit": "ng lint"
    }
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0",
    "@angular/common": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/forms": "^7.2.15",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/router": "^7.2.15",
    "@ionic-native/android-permissions": "^5.16.0",
    "@ionic-native/camera": "^5.16.0",
    "@ionic-native/chooser": "^5.16.0",
    "@ionic-native/core": "^5.16.0",
    "@ionic-native/device": "^5.16.0",
    "@ionic-native/file": "^5.16.0",
    "@ionic-native/file-transfer": "^5.16.0",
    "@ionic-native/geolocation": "^5.16.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/ionic-webview": "^5.16.0",
    "@ionic-native/media-capture": "^5.16.0",
    "@ionic-native/splash-screen": "^5.16.0",
    "@ionic-native/status-bar": "^5.16.0",
    "@ionic/angular": "^4.11.4",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/pusher-js": "^4.2.2",
    "@types/socket.io-client": "^1.4.32",
    "angular2-signaturepad": "^2.9.0",
    "cordova-android": "^8.1.0",
    "cordova-browser": "^6.0.0",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-android-permissions": "1.0.0",
    "cordova-plugin-camera": "4.1.0",
    "cordova-plugin-chooser": "1.2.5",
    "cordova-plugin-device": "2.0.3",
    "cordova-plugin-file": "6.0.2",
    "cordova-plugin-file-transfer": "1.7.1",
    "cordova-plugin-geolocation": "4.0.2",
    "cordova-plugin-ionic-keyboard": "2.2.0",
    "cordova-plugin-ionic-webview": "4.1.1",
    "cordova-plugin-media-capture": "3.0.3",
    "cordova-plugin-splashscreen": "5.0.3",
    "cordova-plugin-statusbar": "2.4.3",
    "cordova-plugin-whitelist": "1.3.4",
    "cordova-sqlite-storage": "3.3.0",
    "core-js": "^2.6.10",
    "google-libphonenumber": "^3.2.6",
    "hammerjs": "^2.0.8",
    "ionic-selectable": "^4.4.1",
    "moment": "^2.24.0",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-moment": "^3.5.0",
    "pusher-js": "^4.4.0",
    "rxjs": "~6.3.3",
    "socket.io-client": "^2.3.0",
    "uuid": "^3.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "^7.3.9",
    "@angular/compiler": "^7.2.15",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/language-service": "^7.2.15",
    "@biesbjerg/ngx-translate-extract": "^2.3.4",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/googlemaps": "^3.38.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^10.14.22",
    "codelyzer": "~4.5.0",
    "husky": "^1.3.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslib": "^1.10.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-chooser": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-geolocation": {},
      "cordova-plugin-device": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-file": {},
      "cordova-plugin-media-capture": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser",
      "ios",
      "android"
    ]
  }
}

如果有人可以让我知道如何解决这个问题将不胜感激

Answer 1

您的代码看起来不错，问题可能出在您的组件类中。上述问题可能是由于 Ionic LoadingController 的使用不足而出现的，一种常见的用例是 loader.dismiss() 在 loader.present() 之前执行，在这种情况下，控制台中会出现同样的错误。您需要检查您的应用程序中是否发生这种情况。
希望这会有所帮助。