Question

pay.service.ts

  @ViewChild('cardElementForm', { static: false }) cardElementForm: ElementRef;
  stripe = Stripe(environment.stripe.pubKey);

  async createStripeForm() {
    const stripeElements = this.stripe.elements();
    const cardElement = stripeElements.create('card');
    cardElement.mount(this.cardElementForm.nativeElement);
  }

编辑：添加了更多代码。这是我导入到page.ts

中的服务

page.html

 <form #saveCard="ngForm" class="saveCardForm">
              <ion-item>
                <div id="cardElementForm" #cardElementForm></div>
                <ion-text *ngIf="error">{{ error }}</ion-text>
              </ion-item>
              <ion-item>
                <ion-text (click)="this.payments.createStripeForm()">Create form</ion-text>
              </ion-item>
              <ion-item>
                <ion-text (click)="this.payments.saveCard()">Send data</ion-text>
              </ion-item>
            </form>

page.ts

import { Pay } from '../services/pay.service';

我收到错误消息：

TypeError: this.cardElementForm is undefined

问题出在哪里？我对此深感困惑。

Answer 1

确保在createStripeForm()生命周期挂钩中调用方法ngAfterViewInit。

Answer 2

由于您的服务没有模板引用，因此从您的服务中删除@ViewChild('cardElementForm', { static: false })，因此您无法在整个服务中访问#cardElementForm。您可以做的是：


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('cardElementForm', { static: false }) cardElementForm: ElementRef;

  constructor(private payService: PayService) {}

  ngAfterViewInit() {
     this.payService.cardElementForm = this.cardElementForm;
  }
}

您的服务具有属性cardElementForm: ElementRef;

Angular 8 @viewChild-返回未定义

2 个答案: