解决Angular中HTML单选按钮选择异常：深入理解name和value属性

<input class="p-4" type="radio" value="true" (toggle)="true" (click)="answerValue=answer.correctAnswer" >{{answer.answer}}

// card 数据结构示例 (在您的组件中可能需要添加 selectedAnswer 属性)
interface Answer {
  answer: string;
  correctAnswer: boolean;
}

interface Card {
  question: string;
  type: string;
  category: string;
  answers: Answer[];
  difficulty: string;
  selectedAnswer: string; // 新增属性，用于存储用户选择的答案的value
}

<div class="pt-10 h-screen">
  <div class="flex flex-wrap h-5/6">
    <div *ngFor="let card of cards" class="w-1/1 md:w-1/3 lg:w-1/5 p-2 h-1/2">
      <div *ngIf="card.question==='';then nil else notnil" class="h-1/1"></div>
      <ng-template #nil></ng-template>
      <ng-template #notnil class="h-full">
        <mat-card class="h-full">
          <mat-card-header>
            <mat-card-title>{{decode(card.question.toString())}}</mat-card-title>
            <mat-card-subtitle>Type: {{card.type}} , Difficulty: {{card.difficulty}}</mat-card-subtitle>
          </mat-card-header>
          <mat-card-content>
            <div *ngFor="let answer of card.answers" class="mb-2">
              <label class="p-4 flex items-center cursor-pointer">
                <!-- 关键改进： -->
                <!-- 1. [name]="card.question": 为每个问题组设置唯一的name属性 -->
                <!-- 2. [value]="answer.answer": 每个选项的value应为答案文本，确保唯一性 -->
                <!-- 3. [(ngModel)]="card.selectedAnswer": 双向绑定，存储选中答案的value -->
                <input type="radio"
                       [name]="card.question"
                       [value]="answer.answer"
                       [(ngModel)]="card.selectedAnswer"
                       class="mr-2">
                {{answer.answer}}
              </label>
            </div>
            <button mat-raised-button (click)="submitAnswer(card)" type="submit">Submit</button>
          </mat-card-content>
        </mat-card>
      </ng-template>
    </div>
  </div>
  <h1 class="w-screen text-8xl">Score: {{count}}/10</h1>
</div>

import { Component, OnInit } from '@angular/core';

// 假设您的 Card 和 Answer 接口定义
interface Answer {
  answer: string;
  correctAnswer: boolean;
}

interface Card {
  question: string;
  type: string;
  category: string;
  answers: Answer[];
  difficulty: string;
  selectedAnswer?: string; // 可选属性，用于存储用户选择的答案的value
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  cards: Card[] = [];
  count: number = 0; // 假设分数

  constructor() { }

  ngOnInit(): void {
    // 模拟数据加载
    this.cards = [
      {
        "question": "Who voiced the character Draco in the 1996 movie 'DragonHeart'?",
        "type": "multiple",
        "category": "Entertainment: Film",
        "answers": [
          { "answer": "Brian Thompson", "correctAnswer": false },
          { "correctAnswer": true, "answer": "Sean Connery" },
          { "answer": "Pete Postlethwaite", "correctAnswer": false },
          { "answer": "Dennis Quaid", "correctAnswer": false }
        ],
        "difficulty": "medium",
        "selectedAnswer": undefined // 初始化 selectedAnswer
      },
      // 更多卡片数据...
      {
        "question": "Another question?",
        "type": "multiple",
        "category": "General Knowledge",
        "answers": [
          { "answer": "Option A", "correctAnswer": false },
          { "correctAnswer": true, "answer": "Option B" },
          { "answer": "Option C", "correctAnswer": false }
        ],
        "difficulty": "easy",
        "selectedAnswer": undefined // 初始化 selectedAnswer
      }
    ];

    // 如果需要解码HTML实体，可以实现 decode 方法
    // this.cards.forEach(card => card.question = this.decode(card.question));
  }

  decode(html: string): string {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return doc.documentElement.textContent || '';
  }

  submitAnswer(card: Card): void {
    if (card.selectedAnswer) {
      const selectedOption = card.answers.find(ans => ans.answer === card.selectedAnswer);
      if (selectedOption && selectedOption.correctAnswer) {
        this.count++;
        console.log(`Correct! Current score: ${this.count}`);
      } else {
        console.log(`Incorrect! Selected: ${card.selectedAnswer}`);
      }
    } else {
      console.log('Please select an answer.');
    }
  }
}