[英]Angular Ngx Stripe error: Property 'id' does not exist on type 'Object'
I cut and paste the Ngx Stripe examples into my Angular project.我将Ngx Stripe示例剪切并粘贴到我的 Angular 项目中。 I'm using Angular 13. I got this error:我正在使用 Angular 13。我收到此错误:
Error: src/app/checkout/checkout.component.ts:22:77 - error TS2339: Property 'id' does not exist on type 'Object'.
22 return this.stripeService.redirectToCheckout({ sessionId: session.id })
Is this a strict
mode error?这是strict
模式错误吗? Do I need to put in a return type :any
on the function?我是否需要在 function 上输入返回类型:any
? I tried session: any
but that didn't compile.我试过session: any
但没有编译。 The .pipe
is confusing me where a return type would go. .pipe
让我感到困惑,返回类型是 go。
Or is something else causing the error?还是有其他原因导致错误?
Here's my checkout.component.ts
:这是我的checkout.component.ts
:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';
import { StripeService } from 'ngx-stripe';
@Component({
selector: 'app-checkout',
templateUrl: './checkout.component.html'
})
export class CheckoutComponent {
constructor(
private http: HttpClient,
private stripeService: StripeService
) {}
checkout() {
// Check the server.js tab to see an example implementation
this.http.post('/create-checkout-session', {})
.pipe(
switchMap(session => {
return this.stripeService.redirectToCheckout({ sessionId: session.id })
})
)
.subscribe(result => {
// If `redirectToCheckout` fails due to a browser or network
// error, you should display the localized error message to your
// customer using `error.message`.
if (result.error) {
alert(result.error.message);
}
});
}
}
Here's my app.module.ts
:这是我的app.module.ts
:
// Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Material
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatTabsModule } from '@angular/material/tabs';
// Made by me
import { HomeComponent } from './home/home.component';
import { FunctionsService } from './home/functions.service';
import { AboutMaggieComponent } from './about-maggie/about-maggie.component';
import { AboutKabbalahComponent } from './about-kabbalah/about-kabbalah.component';
import { DonateComponent } from './donate/donate.component';
import { ContactComponent } from './contact/contact.component';
import { CheckoutComponent } from './checkout/checkout.component';
// 3rd party
import { NgxStripeModule } from 'ngx-stripe';
@NgModule({
declarations: [
AppComponent,
AboutMaggieComponent,
HomeComponent,
AboutKabbalahComponent,
DonateComponent,
ContactComponent,
CheckoutComponent,
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule,
MatCardModule,
MatTabsModule,
NgxStripeModule.forRoot('pk_test_51HUwT...'),
],
providers: [FunctionsService],
bootstrap: [AppComponent]
})
export class AppModule { }
I installed ngx-stripe
with npm
and I see it in my project's Node modules.我用npm
安装了ngx-stripe
,我在项目的节点模块中看到了它。 I haven't set up the backend server code.我还没有设置后端服务器代码。
The error occurs because TypeScript strictly checks the Object type (what it assumes session
will be) and it doesn't find an 'id' property.发生该错误是因为 TypeScript 严格检查 Object 类型(假设session
将是)并且找不到“id”属性。
However, we can assume that session
will have an id
property when the response is sent as we are following the official ngx-stripe docs .但是,我们可以假设session
在发送响应时将具有id
属性,因为我们遵循官方 ngx-stripe 文档。
To get rid of this error, you can assign the any
type to the session
:要消除此错误,您可以将any
类型分配给session
:
// Check the server.js tab to see an example implementation
this.http.post('/create-checkout-session', {})
.pipe(
switchMap((session: any) => {
return this.stripeService.redirectToCheckout({ sessionId: session.id })
})
)
.subscribe(result => {
// If `redirectToCheckout` fails due to a browser or network
// error, you should display the localized error message to your
// customer using `error.message`.
if (result.error) {
alert(result.error.message);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.