我有一个复杂的对象,即,如下所示
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 文件中,我将模型引用作为 Array 提供,如下所示:
sectionRating: any[] = [];
最佳答案
你可以试试这个,用 (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>
代码:
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
关于angular - 如何使用 Angular 中的 For 循环从 Mat-radio-group 中获取选定的单选按钮值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58353034/