Angular技术问题：如何将复选框值从常规组件传递至模型组件

算力阿峰

2026-8-14

问题修复方案

1. 修复子组件（credit-card.component.ts）的@Output语法错误

你的@Output装饰器写在了@Component装饰器之外、组件类的外部，这是语法错误，Angular无法识别该输出属性，导致父组件的事件绑定完全不生效。需将@Output移至组件类内部：

@Component({
  selector: 'app-credit-card',
  templateUrl: './credit-card.component.html',
  styleUrls: ['./credit-card.component.css'],
  providers: [OnetimepaymentFormGroup]
})
export class CreditCardComponent {
  @Output()
  isDirectExpressChecked = new EventEmitter<boolean>();

  cardTypes: string[] = [];

  isDirectExpress(event) {
    const isChecked = event.target.checked;
    console.log(isChecked);
    this.cardTypes = isChecked ? ['direct-express'] : ['mastercard'];
    this.isDirectExpressChecked.emit(isChecked);
  }
}

2. 修复父组件（one-time-payment.component.ts）的事件处理逻辑

子组件emit的是布尔值（true/false），而非原生Event对象，因此父组件无需访问event.target.checked，直接使用传入的参数即可：

isDirectExpressCard: boolean;

isDirectExpressChecked(isChecked: boolean) {
  this.isDirectExpressCard = isChecked;
  console.log("one-time-payment.component.ts isDirectExpressChecked this.isDirectExpressCard = " + this.isDirectExpressCard); 
}

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

3. 验证模板绑定逻辑

当前父组件模板的绑定代码是正确的，无需修改：

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