英文:
polyfills.js:3056 Unhandled Promise rejection: _xxx is not a function in Angular
问题
您的Angular 15 app.component.ts文件中出现了一个错误，错误信息是：TypeError: _this.isAppActive不是一个函数。此错误发生在成功接收Firebase令牌后调用isAppActive（promise）函数的行上。
在您的代码中，问题可能是this指针的上下文不正确。在您的subscribe函数内部，this指针可能指向了不正确的对象，导致isAppActive函数无法被正确调用。
您可以尝试将subscribe函数中的箭头函数改为普通函数，以确保this指针指向正确的上下文，如下所示：
.subscribe(async function(token) {
// ...
this.isAppActive().then(function(isActive) { // 修改此行
// ...
}).catch(function () {
console.log("isAppActive Promise Rejected: ");
});
})
这可能会解决您的问题。请确保在其他地方使用this的地方也要小心处理上下文。
英文:
My Angular 15 app.component.ts throws this error to the console:
polyfills.js:3056 Unhandled Promise rejection: _this.isAppActive is not a function ; Zone: <root> ; Task: null ; Value: TypeError: _this.isAppActive is not a function
at main.js:152:21
at Generator.next (<anonymous>)
at asyncGeneratorStep (vendor.js:216450:24)
at _next (vendor.js:216469:9)
at vendor.js:216474:7
at new ZoneAwarePromise (polyfills.js:3412:21)
at vendor.js:216466:12
at Object.next (main.js:169:11)
at ConsumerObserver.next (vendor.js:114130:25)
at SafeSubscriber._next (vendor.js:114099:22) TypeError: _this.isAppActive is not a function
at http://localhost/main.js:152:21
at Generator.next (<anonymous>)
at asyncGeneratorStep (http://localhost/vendor.js:216450:24)
at _next (http://localhost/vendor.js:216469:9)
at http://localhost/vendor.js:216474:7
at new ZoneAwarePromise (http://localhost/polyfills.js:3412:21)
at http://localhost/vendor.js:216466:12
at Object.next (http://localhost/main.js:169:11)
at ConsumerObserver.next (http://localhost/vendor.js:114130:25)
at SafeSubscriber._next (http://localhost/vendor.js:114099:22)
This error is raised on the line calling the isAppActive (promise) function after successfully receiving the Firebase token:
constructor(
private platform: Platform, private fbNotifications: FbNotificationsService, private fbData: FbRtdbService,
private route: Router, ...
) {
this.fbNotifications.onFCMTokenChanged
.pipe(takeUntil(this._unsubscribeAll))
.subscribe({
async next(token) {
if (token && !this.appLaunched) {
this.firebaseToken = token;
console.log('Token received in listener: ', token);
if (token == 'web-platform') {
this.stopApp = true;
await this.closeLoader();
this.taService.dialogClose("Unsupported Platform", "xxxxx is supported on mobile devices only at this time. Please install directly from the store.").then(() => {
App.exitApp();
});
} else {
this.appLaunched = true;
this.isAppActive().then((isActive) => { //<<<====== ERROR HERE
console.log('Returned from isAppActive: ', isActive);
if (isActive) {
this.initializeApp();
} else if (isActive == 0) {
SplashScreen.hide();
this.taService.dialogClose("Thank You", "Thank you for your interest in using xxxx. At this time we have reached our quota for new members. Please open the app again in a few days as we open up for more members.").then(() => {
App.exitApp();
});
}
}).catch(function () {
console.log("isAppActive Promise Rejected: ");
});
}
this._unsubscribeAll.next(true);
this._unsubscribeAll.complete();
}
},
error(err) {
}
});
The isAppActive function is:
isAppActive() {
return new Promise((resolve, reject) => {
this.awsdb.runQuery("getAppSettings", {}).subscribe({
next(res) {
console.log('Received app settings: ', res);
if (!res) {
//DB request timed out - DB not available
SplashScreen.hide();
this.taService.dialogClose("Database Error", "Ooooops. The system Database is not available now. Please try again later").then((resDialog) => {
if (resDialog) {
App.exitApp();
}
});
} else {
resolve(res[0].s["~properties"].appActive);
}
},
error(err) {
console.log('TG Query Error: ' + err.description);
//Route to some error page?
SplashScreen.hide();
this.taService.dialogClose("Network Error", "Ooooops. I can't find any Internet at this time");
reject(-1);
}
});
});
}
I can see this is coming from polyfills, but the polyfills.ts file looks innocent:
import './zone-flags';
import 'zone.js'; // Included with Angular CLI.
(window as any)['global'] = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
What am I missing, please?
答案1
得分: 1
因为您正在为next使用非箭头函数，所以this是包含next函数的封闭对象，而不是您正在构建的对象。
next函数应该是一个箭头函数，以访问使用this创建的对象：
.subscribe({
next: async (token) => {
或者在构造函数的顶部添加const that = this;并使用that，这样您就不会依赖于上下文可能会改变的this。
英文:
Because you're using a non-arrow function for next, this there is the enclosing object holding the next function that you're giving to subscribe; not the object you're constructing.
The next function should be an arrow function to access the object being created using this:
.subscribe({
next: async (token) => {
Or do something like put const that = this; at the top of the constructor and use that so you aren't relying on this that can change depending on the context.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论