错误：未捕获（承诺）：覆盖不存在（离子可选）
Posted
技术标签:
【中文标题】错误：未捕获（承诺）：覆盖不存在（离子可选）【英文标题】：Error: Uncaught (in promise): overlay does not exist (ionic-selectable) 【发布时间】：2020-03-17 10:08:12 【问题描述】：我正在使用离子可选包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"
]
如果有人能告诉我如何解决这个问题，将不胜感激
【问题讨论】：
【参考方案1】：您的代码看起来不错，问题可能出在您的组件类中。上述问题可能是由于 Ionic LoadingController 的使用不足而出现的，一种常见的用例是 loader.dismiss() 在 loader.present() 之前执行，在这种情况下，控制台中会出现同样的错误。您需要检查您的应用程序中是否发生这种情况。 希望这会有所帮助。
【讨论】：
我必须在“this.modalCtrl.dismiss()”之前调用“this.loading.dismiss()”。解决了问题【参考方案2】：检查一下离子组件和离子页面你是否导入了ModalController，在我的情况下，我错误地导入了popOver而不是ModalController。
【讨论】：
【参考方案3】：确保您没有错误地导入 PopoverController 而不是 ModalController。
【讨论】：
【参考方案4】：最近，我也遇到了同样的错误“错误：未捕获（承诺中）：覆盖不存在”。
场景：以离子模式显示加载器。加载器需要在获取数据前显示，在接收到数据后关闭。
当我调试它时，我发现this.loadingCtrl.dismiss() 在loader.present() 之前被调用。
有时，您可能需要加载/处理少量数据，届时可以调用 this.loadingCtrl.dismiss()。
对我来说最简单的解决方案是添加 setTimeout() 以关闭加载程序。
setTimeout(
this.loadingCtrl.dismiss()
, 100)
【讨论】：
【参考方案5】：我遇到了同样的错误，这是因为我在没有弹出框处于活动状态时调用 popoverController.dismiss()。
【讨论】：
【参考方案6】：我也遇到了这个问题，其他解决方案都不适合我。起作用的是确保要解除的模式存在，然后调用解除。
const popover = await this.popoverCtrl.getTop();
if (popover)
await popover.dismiss(null);
【讨论】：
【参考方案7】：在我的情况下，我通过从结束加载的方法中删除 return 来解决它，这样它就不会从一开始就返回它
之前
async finishLoading()
this.loading = false;
return await this.loadingController.dismiss();
之后
async finishLoading()
this.loading = false;
await this.loadingController.dismiss();
【讨论】：
以上是关于错误：未捕获（承诺）：覆盖不存在（离子可选）的主要内容，如果未能解决你的问题，请参考以下文章
未捕获（承诺）：TypeError：无法读取未定义的属性“创建”（离子 3.9，Angularjs 5.0.3）
React axios api调用错误：未捕获（在承诺中）TypeError：setTempFetch不是函数
离子应用程序：Android --livereload 显示 cordova 不可用错误