Angular 6 и Angular Material - mat-radio-group [(ngModel)] устанавливают динамическую переменную внутри * ngFor

Question

Я использую Angular 6 и Angular Angular Material, у меня есть динамический список опросов со списком опций.Я хочу показать выбранный вариант с двухсторонней привязкой данных.так как мой список является динамическим, я хочу передать переменную в [(ngModel)].попытался передать переменную, но не повезло, пожалуйста, предложите альтернативное решение пример кода stackblitz

Answer 1

Вы использовали одну и ту же переменную (mySelection) для обоих вопросов.Вместо этого вам нужно использовать две разные переменные или, что еще лучше, массив.Вот исправленная версия StackBlitz и соответствующий код.

Шаблон

<code><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 }}

Компонент

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

  selectedAnswers = []

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