[英]Angular ngx-swiper-wrapper giving an error of TS2339 Property 'x' does not exist on type 'y'
[英]Angular Ngx Stripe error: Property 'id' does not exist on type 'Object'
我将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 })
这是strict
模式错误吗? 我是否需要在 function 上输入返回类型:any
? 我试过session: any
但没有编译。 .pipe
让我感到困惑,返回类型是 go。
还是有其他原因导致错误?
这是我的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
,我在项目的节点模块中看到了它。 我还没有设置后端服务器代码。
发生该错误是因为 TypeScript 严格检查 Object 类型(假设session
将是)并且找不到“id”属性。
但是,我们可以假设session
在发送响应时将具有id
属性,因为我们遵循官方 ngx-stripe 文档。
要消除此错误,您可以将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.