我使用的是离子可选包 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"
]
}
}
如果有人能让我知道如何解决这个问题，将高度赞赏。
你的代码看起来不错，问题可能出在你的组件类。所提到的问题可能是由于Ionic LoadingController的使用不当，一个常见的情况是当loader.dismiss()在loader.present()之前执行，在这种情况下，同样的错误会在控制台中出现。你需要检查这种情况是否发生在你的应用程序中。希望这能帮助你。
检查一次两地的情况 离子组件和离子页面 你是否导入了ModalController，在我的例子中，我错误地导入了popOver而不是ModalController。
确保你没有错误地导入popoverController而不是ModalController。