Как получить выбранные значения Radio Button из Mat-Radio-group с помощью цикла For в Angular

Question

У меня сложный объект, например, как показано ниже

someName = [
{name: "John",id: "1",rating: ['0', '1', '2', '3', '4', '5']},
{name: "robert", id: "2", rating: ['0', '1', '2', '3', '4', '5']},
{name: "luv", id: "3", rating: ['0', '1', '2', '3', '4', '5']}
];

из которого я хочу сделать анкету, чтобы убедиться, что они оценивают свой ответ от 0 до 5, теперь, когда я визуализирую свой html, как показано ниже

<ng-container *ngFor="let sort of someName; let i=index">
   <label id="example-radio-group-label">Rate your favorite section</label>
   <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group" [(ngModel)]="sectionRating">
      <mat-radio-button class="example-radio-button" *ngFor="let section of sort.sections" [value]="section">{{season}}</mat-radio-button>
   </mat-radio-group>
</ng-container>

Это отображается правильно, но когда я выбираю свой первый рейтинг вопроса как 1, он также выбирается из всех других рейтингов, и также я хочу фиксировать каждый рейтинг для того, что я пробовал [(ngModel)] но он дает только одно значение вместо массива

в моем файле.ts я дал ссылку на модель как массив следующим образом:

sectionRating: any[] = [];

Answer 1

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

HTML-код:

<ng-container *ngFor="let sort of someName; let i=index">
    <label id="example-radio-group-label">Rate your favorite section</label>
    <br>
    {{sort.name}}
    <br>
    <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group">
        <mat-radio-button class="example-radio-button" *ngFor="let section of sort.rating" [value]="section"
            (change)="radioChange($event,sort)">
            {{section}}</mat-radio-button>
    </mat-radio-group>
    <br>
    <br>

</ng-container>

<h2>Selected Array</h2>
<div>
   {{finalArray | json }}
</div>

Код TS:

import { Component } from '@angular/core';
import { MatRadioChange } from '@angular/material';
// ...

/**
 * @title Basic radios
 */
@Component({
  selector: 'radio-overview-example',
  templateUrl: 'radio-overview-example.html',
  styleUrls: ['radio-overview-example.css'],
})
export class RadioOverviewExample {
  someName = [
    { name: "John", id: "1", rating: ['0', '1', '2', '3', '4', '5'] },
    { name: "robert", id: "2", rating: ['0', '1', '2', '3', '4', '5'] },
    { name: "luv", id: "3", rating: ['0', '1', '2', '3', '4', '5'] }
  ];

  finalArray: any[] = [];

  radioChange(event: MatRadioChange, data) {
    var obj = this.someName.filter(x => x.id == data.id)[0];
    obj.selected = event.value;
    if (!this.finalArray.some(x => x.id == data.id)) {
      this.finalArray.push(obj);
    }
  }
}

StackBlitz_Demo