Angular 如何使用For loop从Mat单选组中获取选定的单选按钮值
我有一个复杂的物体,如下图所示Angular 如何使用For loop从Mat单选组中获取选定的单选按钮值,angular,angular-material,angular-template-form,Angular,Angular Material,Angular Template Form,我有一个复杂的物体,如下图所示 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']} ]; <ng-container *ngFor=
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']}
];
<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>
从中我想做一个调查问卷,以确保他们从0-5分评价他们的答案,现在当我呈现我的html时,如下图所示
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']}
];
<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>
您可以尝试使用
(change)
事件,然后在局部变量中添加click项
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>
您可以使用一个布尔属性来选中取消选中radio按钮,但我需要每个部分分别评级,并且somename对象中可以有n个对象。是否可以创建stackblitz?我从您的(@prashant)解决方案中找到了解决方法,非常感谢。