Angular-將復選框值從常規組件傳遞到模型組件

我的應用程式有一個支付表單，它接受四種主要型別的信用卡，還有第五種稱為 Direct Express，它與萬事達卡有某種關聯。該應用程式需要能夠區分 Direct Express 卡和普通萬事達卡。付款表格有一個復選框，一旦輸入卡號，就會出現一個復選框，詢問該卡是否為 Direct Express 卡（對于 Visa 等，它不會出現，只有萬事達卡號碼）。其中一個組件中的方法將回傳 MASTERCARD 或 DIRECTEXPRESSMASTERCARD，具體取決于是否選中該框。我無法將檢查的值傳遞給該方法。

這涉及五個檔案，它們在樹中顯示如下：“app”檔案夾有一個檔案夾“one-time-payment”，該檔案夾有一個檔案夾“model”。“模型”檔案夾有一個模型組件“onetimepayment-form-group.ts”。“一次性付款”檔案夾還有一個名為“付款方式”的檔案夾，其中有一個“信用卡”檔案夾。在該檔案夾中是“credit-card.component.html”和“credit-card.component.ts”。在“one-time-payment”檔案夾中，與“model”檔案夾和“payment-method”檔案夾處于同一級別的是兩個檔案，“one-time-payment.component.html”和“one-time-付款.component.ts'。

'credit-card.component.html' 的相關代碼如下：

<div class="row first checkBoxPannel" *ngIf="directExpressCheck">
  <div class="offset-md-3 col-md-9" >
      <input type="checkbox" (change)="isDirectExpress($event)" id="isDECheckbox">
      <label for="isDECheckbox" class="control-label" style="color:red;padding-left:.5rem;">Check here if this card is DirectExpress</label>
  </div>
</div>

'credit-card.component.ts' 的相關代碼如下：

@Component({
  selector: 'app-credit-card',
  templateUrl: './credit-card.component.html',
  styleUrls: ['./credit-card.component.css'],
  providers: [OnetimepaymentFormGroup]
})

@Output()
  isDirectExpressChecked = new EventEmitter<boolean>();

isDirectExpress(event) {
  console.log(event.target.checked);    // WHEN BOX IS CHECKED CONSOLE.LOG SHOWS TRUE
  if(event.target.checked) {
    this.cardTypes = ['direct-express'];
    this.isDirectExpressChecked.emit(true);
  } else {
    this.cardTypes = ['mastercard'];
    this.isDirectExpressChecked.emit(false);
  }
}

'one-time-payment.component.html' 的相關代碼如下：

<app-credit-card [(paymentForm)]="paymentForm" (isDirectExpressChecked)="isDirectExpressChecked($event)" *ngIf="isCreditCardPayment"></app-credit-card>

'one-time-payment.component.ts' 的相關代碼如下：

isDirectExpressCard:boolean;

isDirectExpressChecked(event) {
  this.isDirectExpressCard = event.target.checked;
  console.log("one-time-payment.component.ts isDirectExpressChecked this.isDirectExpressCard = "   this.isDirectExpressCard);  // THIS LINE DOES NOT EXECUTE
}

buildCreditCardOTPRequest(clientId,tokenId) {
  return {
    electronicPayment : {
      cardType : OnetimepaymentFormGroup.getCreditCardType(this.cardNumber.value, this.isDirectExpressCard)[0],
    }
  }
}

最后，'onetimepayment-form-group.ts'的相關代碼如下：

public static getCreditCardType(cardNumber,isDirectExpressChecked?) {
  console.log("onetimepayment-form-group getCreditCardType isDirectExpressChecked = "   isDirectExpressChecked);
  if(OnetimepaymentFormGroup.MASTER_REGEX.test(cardNumber)){
    if(!isDirectExpressChecked) { 
      return ['MASTERCARD'];
  } else {
    return ['DIRECTEXPRESSMASTERCARD'];
  } 
}

我認為使用帶有 @Output 裝飾器的 EventEmitter 可以幫助我傳輸值，但是 getCreditCardType 方法中的 console.log 顯示 isDirectExpressChecked 是未定義的，因此值沒有傳遞。任何幫助表示贊賞。

uj5u.com熱心網友回復：

下面的 $event 將回傳 true 和 false，因為您將其配置為new EventEmitter<boolean>();.

<app-credit-card [(paymentForm)]="paymentForm" (isDirectExpressChecked)="isDirectExpressChecked($event)" *ngIf="isCreditCardPayment"></app-credit-card>

可以這么說，isDirectExpressCard直接將事件分配給變數可能會解決您的問題。

isDirectExpressChecked(event) {
  this.isDirectExpressCard = event; // <-- change this might fix your issue
  console.log("one-time-payment.component.ts isDirectExpressChecked this.isDirectExpressCard = "   this.isDirectExpressCard);  // THIS LINE DOES NOT EXECUTE
}

標籤：有角度的成分事件发射器

上一篇：即使值發生變化，如何使網格保持固定大小？

下一篇：角材料按鈕不起作用