我剪切并粘贴 Ngx Stripe我的 Angular 项目中的示例。我正在使用 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 })
这是严格
模式错误吗?我需要在函数中输入返回类型 :any
吗?我尝试了 session: any
但没有编译。 .pipe
让我很困惑返回类型会去哪里。
或者是其他原因导致了错误?
这是我的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);
}
});
}
}
这是我的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 { }
我使用 npm
安装了 ngx-stripe
,并且在项目的 Node 模块中看到了它。我还没有设置后端服务器代码。
最佳答案
发生错误的原因是 TypeScript 严格检查对象类型(它假定 session
的类型)并且找不到“id”属性。
但是,我们可以假设当响应以 we are following the official ngx-stripe docs 形式发送时,session
将具有 id
属性。 .
要消除此错误,您可以将 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);
}
});
关于 Angular Ngx Stripe 错误 : Property 'id' does not exist on type 'Object' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71229766/