錯誤：未捕獲（承諾）：覆蓋不存在（離子可選）

Question

我正在使用離子可選擇的 package 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 中的說明使用了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

您的代碼看起來不錯，問題可能出在您的組件 class 中。 上面提到的問題可能是由於 Ionic LoadingController 的使用不足而出現的，一個常見的用例是 loader.dismiss() 在 loader.present() 之前執行，在這種情況下，控制台中會出現同樣的錯誤。 您需要檢查您的應用程序中是否發生這種情況。 希望這會有所幫助。

Answer 2

確保您沒有錯誤地導入 PopoverController 而不是 ModalController。

Answer 3

我也遇到了這個問題，其他解決方案都不適合我。 起作用的是確保要解除的模式存在，然后調用解除。

{
       const popover = await this.popoverCtrl.getTop();
        if (popover)
            await popover.dismiss(null);    
}

Answer 4

檢查是否導入了 ModalController 的離子組件和離子頁面在我的情況下，我錯誤地導入了 popOver 而不是 ModalController。

Answer 5

最近，我也遇到了同樣的錯誤“錯誤：未捕獲（承諾）：覆蓋不存在”。

場景：以離子模式顯示加載器。 Loader需要在獲取數據前顯示，接收數據后關閉。

當我調試它時，我發現this.loadingCtrl.dismiss()在loader.present()之前被調用。

有時，您可能需要加載/處理少量數據，到那時this.loadingCtrl.dismiss()可以被調用。

對我來說最簡單的解決方案是添加setTimeout()來關閉加載程序。

setTimeout({
  this.loadingCtrl.dismiss()
}, 100)

Answer 6

我遇到了同樣的錯誤，這是因為我在沒有彈出框處於活動狀態時調用popoverController.dismiss() 。

Answer 7

在我的情況下，我通過從結束加載的方法中刪除返回來解決它，這樣它就不會從一開始就返回它

前

async finishLoading() {
    this.loading = false;
    return await this.loadingController.dismiss();
}

后

async finishLoading() {
    this.loading = false;
    await this.loadingController.dismiss();
}

Answer 8

在我的情況下，拋出了錯誤，因為我在創建模態之前將其關閉。