![](/img/trans.png)
[英]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.