Angular 6和Angular Material-mat-radio-group [（ngModel）]在* ngFor内部设置动态变量

Question

我正在使用Angular 6和Angular Angular Material， 我有带有选项列表的动态民意测验列表。我想显示带有两种方式的数据绑定的选定选项。因为我的列表是动态的，所以我想在[（ngModel）]中传递变量。尝试传递变量但没有运气，请提出替代解决方案stackblitz example code

Answer 1

您对两个问题都使用了相同的变量（mySelection）。相反，您需要使用两个不同的变量，或者甚至更好的数组。这是the fixed version on StackBlitz，这是相关代码。

模板

<ol>
    <li *ngFor="let poll of polls;let i = index">
        {{poll.name}}

        <mat-radio-group class="example-radio-group" [(ngModel)]="selectedAnswers[i]">
            <mat-radio-button class="example-radio-button" *ngFor="let option of poll.options" [value]="option.answer">
                {{option.answer}}
            </mat-radio-button>
        </mat-radio-group>
    <strong>Seleted Answer : {{selectedAnswers[i]}}</strong>
    <button  [disabled]="selectedAnswers[i]==undefined" mat-raised-button color="accent">save</button>
  </li>
</ol>

<pre>{{ selectedAnswers | json }}</pre>

组件

@Component({
  /* ... */
})
export class AppComponent  {

  selectedAnswers = []

  polls = [
    /* ... */
  ]
}