Angular Material卡片：点击按钮获取同卡片单选框与输入框值

核心修改点 #

• 给每个<mat-radio-group>添加独立模板变量，避免循环中变量冲突
• 移除单选按钮上冗余的点击事件和局部变量，利用单选组自身的value属性跟踪选中项
• 按钮点击时，将当前卡片的单选组和金额输入框作为参数传入，确保获取的是当前卡片的对应值

修改后的完整HTML代码 #

<div class="card-container">
  <div *ngFor="let charity of charitiesMap | keyvalue" class="cards">
    <mat-card class="charity-card">
      <mat-card-title class="charity">{{charity.key}}</mat-card-title>

      <mat-card-content class="project">
        <!-- 给当前卡片的单选组添加独立模板变量 -->
        <mat-radio-group class="radio-group" #projectGroup>
          <mat-radio-button *ngFor="let project of charity.value" [value]="project">
            {{project?.[0]}}
          </mat-radio-button>
        </mat-radio-group>

        <mat-form-field class="inputDigit">
          <mat-label>Donation Amount</mat-label>
          <input matInput type="number" step="0.00001" min="0" max={{balance}} placeholder="Donation Amount" value="0.0001" #donationAmount>
        </mat-form-field>
      </mat-card-content>

      <mat-card-actions class="donateTo">
        <!-- 传入当前卡片的单选组、输入框值，也可以带上慈善组织名称 -->
        <button mat-raised-button (click)="saveDonation(charity.key, projectGroup.value, donationAmount.value)">Donate</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

组件内处理方法示例 #

saveDonation(charityName: string, selectedProject: any, donationAmount: string | number) {
  // 格式化并保存当前卡片的捐赠数据
  const donationData = {
    charity: charityName,
    selectedProject: selectedProject,
    amount: Number(donationAmount) // 转换为数字类型
  };
  
  console.log('当前卡片的捐赠信息：', donationData);
  // 这里可以添加保存到本地、发送请求等后续逻辑
}

问题原因说明 #

原来的实现中，#myProject模板变量在*ngFor循环中会被重复覆盖，导致无论点击哪个卡片的单选按钮，最终只能获取到最后一次点击的项目。通过给每个卡片的单选组添加独立模板变量，就能精准定位到当前卡片的选中项，结合输入框变量一起传入方法，就能实现仅保存当前点击卡片的两个输入值。

内容的提问来源于stack exchange，提问作者NonnoPinto