Установить значение переменной компонента внутри слушателя события submit

Question

Я пытаюсь внедрить Stripe Payment in. net core / Angular 8 stack.

Base don Stripe Documentation Я использую Stripe. js для обработки платежа, и процесс оплаты работает нормально.

после обработки платежа полоса отправляет сообщение об ошибке или успешном результате. Основываясь на этом результате, я хочу установить переменную paymentDone, определенную в компоненте, и после ее установки она использовалась для управления пользовательским интерфейсом. но я всегда получаю сообщение об ошибке paymnetDone is undefined, поскольку не удается разрешить область действия this. обратите внимание на то, как установить это значение, чтобы angular смог обнаружить изменение значения и соответствующим образом обновить пользовательский интерфейс.

код выглядит следующим образом:

  InitialStripeElement(transactionId: string) {
    // Your Stripe public key
    const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
    // stripe = '';   
    const elements = stripe.elements();
    const card = elements.create('card');
    card.mount(document.getElementById('cardElement'));
    card.addEventListener('change', event => {
      const displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });
    // Listen for form submission, process the form with Stripe,
    const paymentForm = document.getElementById('payment-form');
    paymentForm.addEventListener('submit', event => {
      event.preventDefault();
      console.log(event);
      // stripe.confirmCardPayment(transactionId, {
      stripe.confirmCardPayment('pi_xxxxxxxxxxxxxx_secret_xxxxxxxxxxx', {
        payment_method: {
          card,
        },
      }).then(function (result) {
        if (result.error) {
          this.paymentDone = false;
        } else {
          // The payment has been processed!
          console.log(JSON.stringify(result.paymentIntent));
          if (result.paymentIntent.status === 'succeeded') {

            this.paymentDone = true;
          }
        }
      });
    });
  }

Я пробовал связывать (это) при отправке eventlistner, но он возвращает ошибку «Свойство« bind »не существует для типа« void ». '

Я также попытался установить значение для элемента HTMLDome, чтобы angular могло перехватить событие (change) и Я могу установить значение, используя это событие, но не повезло. код выглядит примерно так

код TS

.
.
.
}).then(function(result) {
        if (result.error) {
            (document.getElementById('paymentDoneFlag') as HTMLInputElement).value == 'error'
        } else {
          // The payment has been processed!
          console.log(JSON.stringify(result.paymentIntent));
          if (result.paymentIntent.status === 'succeeded') {

            (document.getElementById('paymentFlag') as HTMLInputElement).value == 'success'
          }
        }
.
.
.

setIsPaymentDone(value){ 
   this.paymentDone = true;value == 'error' ? false: true;
}

HTML код

 <input type="hidden" #paymentFlag id="paymentFlag" (change)="setIsPaymentDone(value);" name="paymentFlag">

не уверен, что еще я могу поставить на место ...