为什么当我切换一个垫子单选按钮时，其他卡中的所有按钮也会被切换？答案

【问题标题】：Why does when i toggle one mat-radio button all in other cards get toggled too?为什么当我切换一个垫子单选按钮时，其他卡中的所有按钮也会被切换？
【发布时间】：2022-09-23 23:43:54
【问题描述】：

我的 home.component.html 文件包含

<div class=\"grid grid-cols-5 gap-4 pt-10\">
  <div *ngFor=\"let card of cards\" class=\"\">
    <div *ngIf=\"card==null;then nil else notnil\"></div>
    <ng-template #nil></ng-template>
    <ng-template #notnil>
    <mat-card class=\"\">
    <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>

      <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"valueFromRadio\">
        <mat-radio-button class=\"p-2\" value=\"1\">{{decode(card.correct_answer)}}</mat-radio-button>
        <mat-radio-button value=\"0\" class=\"p-2\" *ngFor=\"let incorrect_answer of card.incorrect_answers\">{{decode(incorrect_answer)}}</mat-radio-button>
      </mat-radio-group>

    </mat-card-content>
    <button mat-button type=\"submit\" (click)=\"getAns(valueFromRadio,card.question)\">Submit</button>
  </mat-card>
    </ng-template>
    </div>

  <h1 class=\"w-screen text-8xl\">Score: {{count}}</h1>
</div>

我的 home.component.ts 文件包含

const route:string=\"https://opentdb.com/api.php?amount=10\"
export class Card{
  constructor(public category:string,
              public type:string,
              public difficulty:string,
              public question:string,
              public correct_answer:string,
              public incorrect_answers:string[]) {
  }
}
export class ResponseApi{
  constructor(public response_code:number,
              public results:Card[]) {

  }
}
export class HomeComponent implements OnInit {
  valueFromRadio=0;
  fetchedData: ResponseApi ={
    response_code:1,
    results:[]
  };
  count=0
  cards:Card[]=[]
  answer: number[]=[];
  constructor(private http:HttpClient) { }
  getAns(value:number,question:string){
    console.log(\"sd\",question)
    if (value==1){
      this.count++
    }
    for (let i = 0; i<this.cards.length;i++){
      if (this.cards[i].question==question){
        this.cards[i]==null
      }
    }
  }
  private async fetchData(){
    this.http.get<any>(route).subscribe(
      res=>{
        this.fetchedData=res
        this.fetchedData.results.map((value, index) => {
          this.cards[index]=value
        })
        console.log(\"1222\",this.cards)
      }
    );
  }
  ngOnInit(): void {
    this.fetchData()
    console.log(this.cards)

  }
  decode(s: string) {
    return decode(s)
  }
}

当我按下 card.correct_answer 时，所有其他卡片的正确答案也会被切换。我也想在提交卡时将其删除，但我不知道该怎么做。

card.question 似乎也不适合我。我使用最新的稳定角度，如果这与我的问题相关，也使用延迟加载。

所有卡片都绑定到相同的valueFromRadio 属性。您需要一个数组并单独绑定它们。
有没有捷径？ @埃尔达

标签： html angular typescript tailwind-css

【解决方案1】：

您正在为单选按钮使用 box 语法中的香蕉，该语法用于双向数据绑定。

除非您需要从组件中选择单选按钮，否则您可以切换到单向数据绑定，例如：

<mat-radio-group aria-label="Select an option" (click)="radioValueCatcher($event)">
        <mat-radio-button class="p-2" value="1">{{decode(card.correct_answer)}}</mat-radio-button>
        <mat-radio-button value="0" class="p-2" *ngFor="let incorrect_answer of card.incorrect_answers">{{decode(incorrect_answer)}}</mat-radio-button>
</mat-radio-group>

然后在您的组件中：

radioValueCatcher(clickEvent) {
    // Validate whatever value comes back, do something else with it, etc
    this.valueFromRadio = clickEvent.value;
}

【讨论】：