Угловая переменная неопределенный результат

Question

Я пытался решить это сам, но я думаю, что мне нужна помощь.Это были часы поиска решения, но я не могу решить это сам.Я изучаю asp.net core 2.2 web api.И я следую учебному пособию, которое я нашел на YouTube

Webapi работает с использованием PostMan.Мне удалось сохранить в базе данных

Но проблема в том, когда я звоню в Angular.

И я думаю, что проблема не в том, как я это называю.Но привязка входных текстовых данных.

Вот HTML-код

<div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text bg-white">
            <i class="far fa-credit-card" [class.green.icon]="CardNumber.valid" [class.red.icon]="CardNumber.invalid && CardNumber.touched"></i>
          </div>
          <input maxlength="16" minlength="16" required name="16 Digit CardNumber" #CardNumber="ngModel" [(ngModel)]="service.formData.CardNumber" class="form-control" placeholder="Card Number">
        </div>

      </div>

У меня есть другой входной текст, который работает нормально, и на мой взгляд они одинаковы.Так что я не знаю причину почему.В моем веб-API.Все данные необходимы для получения ошибки 400 (Bad Request).

Я использую console.log для просмотра входных данных в браузере.Но когда дело доходит до CardNumber, оно становится undefined, поэтому я ожидаю, что это будет проблемой.

Но другой входной текст в порядке.

Это моя модель

export class PaymentDetail {
    PMId: number;
    CardOwnerName: string;
    CardNumber: string;
    ExpirationDate: string;
    CVV: string;
}

И этот метод вызывается кнопкой отправки, где я получаю undefined

postPaymentDetail(formData: PaymentDetail) {
    console.log(formData.CardOwnerName);
    console.log(formData.CVV);
    console.log(formData.ExpirationDate);
    console.log(formData.CardNumber);
    console.log(formData.PMId);
    return this.http.post(this.rootUrl + '/PaymentDetail', formData);
  }

Обновление: это результат заголовка вкладки сети

Данные, которые я набрал во входном тексте, есть.

И это результат вкладки Network Preview

Я проверил код c #.И я добавляю точку останова в коде.Точка останова не работает с помощью Angular.Но работает с почтальоном.Я имею в виду код называется.Я неправильно делаю точку останова?

Answer 1

вам не нужно отправлять какие-либо данные в метод postPaymentDetail(), поскольку вы уже связываете их с ngModel.

сделать некоторые изменения, как показано ниже вашего компонента,

formData = new PaymentDetail();

postPaymentDetail() {
  console.log(this.formData.CardNumber);
  return this.http.post(this.rootUrl + '/PaymentDetail', this.formData);
}

Надеюсь, это решит вашу проблему:)

Answer 2

Создайте конструктор класса PaymentDetail и определите значение переменной по умолчанию, пустое.

Как: -

export class PaymentDetail {
    PMId: number;
    CardOwnerName: string;
    CardNumber: string;
    ExpirationDate: string;
    CVV: string;

   constructor () {
    this.PMId = 0;
    this.CardOwnerName = "";
    this.CardNumber = "";
    this.ExpirationDate = "";
    this.CVV = "";
   }

}