角6材料数据表，单选按钮
角6材料数据表，单选按钮
提问于 2018-11-08 18:32:19
我有一个角度为6的资料数据表，在表的每一行中，我有一组单选按钮。当为特定行选择单选按钮时，会触发一个事件来进行API调用。在这一点上一切都很顺利。但是，如果数据表有多个页面，而我导航到第二个页面，然后返回到第一个页面，则显示为selected的单选按钮是页面首次加载时最初选择的按钮，而不是更新的选择。当我刷新页面时，将重新加载数据，并选择正确的单选按钮( API调用成功地更新数据库)。不确定这是否有意义。下面是表中一行的示例：
当页面第一次加载时，将在这组单选按钮中选择中间选项。如果要选择Beginner选项，将按预期选择Beginner的单选按钮，并通过API调用成功地将值保存到数据库中。当我导航到第二页，然后回到第一页时，选中的单选按钮是中间的，而不是初级的。当我翻到第二页的时候，这个州似乎已经失去了。
我删除了(更改)并检查了单选按钮中的属性，看看会发生什么。在第一次加载页面时，没有选择任何选项。当我做了一个选择，导航到第2页，然后返回到第1页，单选按钮回到原来的状态(没有选择)。我还将单选按钮更改为本地HTML单选按钮，并看到了相同的行为。我在控制台中没有看到错误。
这是我的组件html
<div class="mat-elevation-z8">
<table id="dataTable" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th class="headerCell" mat-header-cell *matHeaderCellDef>Technology</th>
<td style="width: 375px;" mat-cell *matCellDef="let data">{{data.name}}</td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
<ng-container matColumnDef="none">
<th class="headerCell" mat-header-cell *matHeaderCellDef>None</th>
<td class="radioButtonCell" mat-cell *matCellDef="let data">
<mat-radio-button [name]="data.id" value="1" [checked]="data.level == 0 || data.level == 1 || evaluations.length == 0" (change)="saveDataLevel($event, data.dataDescription.dataGroupId)"></mat-radio-button>
</td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
<ng-container matColumnDef="beginner">
<th class="headerCell" mat-header-cell *matHeaderCellDef>Beginner</th>
<td class="radioButtonCell" mat-cell *matCellDef="let data">
<mat-radio-button [name]="data.id" value="2" [checked]="data.level == 2" (change)="saveDataLevel($event, data.dataDescription.dataGroupId)"></mat-radio-button>
<div class="infoSubscript"><img class="icon" src="/src/assets/open-iconic/svg/info.svg" alt="Information" (click)="openDialog(data.name, data.dataDescription.dataGroupId, 2)" /></div>
</td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
<ng-container matColumnDef="intermediate">
<th class="headerCell" mat-header-cell *matHeaderCellDef>Intermediate</th>
<td class="radioButtonCell" mat-cell *matCellDef="let data">
<mat-radio-button [name]="data.id" value="3" [checked]="data.level == 3" (change)="saveDataLevel($event, data.dataDescription.dataGroupId)"></mat-radio-button>
<div class="infoSubscript"><img class="icon" src="/src/assets/open-iconic/svg/info.svg" alt="Information" (click)="openDialog(data.name, data.dataDescription.dataGroupId, 3)" /></div>
</td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
<ng-container matColumnDef="expert">
<th class="headerCell" mat-header-cell *matHeaderCellDef>Advanced</th>
<td class="radioButtonCell" mat-cell *matCellDef="let data">
<mat-radio-button [name]="data.id" value="4" [checked]="data.level == 4" (change)="saveDataLevel($event, data.dataDescription.dataGroupId)"></mat-radio-button>
<div class="infoSubscript"><img class="icon" src="/src/assets/open-iconic/svg/info.svg" alt="Information" (click)="openDialog(data.name, data.dataDescription.dataGroupId, 4)" /></div>
</td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
<ng-container matColumnDef="description">
<th class="headerCell" mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let data">{{data.dataDescription.description}}</td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
</div>这是我的组件ts文件
export class TestComponent implements OnInit {
displayedColumns: string[] = ['name', 'none', 'beginner', 'intermediate', 'advanced', 'description'];
dataSource: MatTableDataSource<IData>;
assessments: IAssessment[];
dataGroupId: string = "";
dataGroupName: string = "";
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private dataService: Data, private route: ActivatedRoute, private snackBar: MatSnackBar, private dialog: MatDialog) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.dataGroupId = params["data"];
this.dataGroupName = params["group"];
if (this.dataGroupId && this.dataGroupName) {
this.getDataForGroup();
}
});
}
getDataForGroup() {
this.dataSource = null;
this.dataService.getDataForGroup(this.dataGroupId)
.subscribe(s => {
this.assessments = s.assessments;
this.dataSource = new MatTableDataSource<IData>(s.data);
this.paginator.firstPage();
this.dataSource.paginator = this.paginator;
});
}
saveDataLevel(event, dgrId) {
var dataId = event.source.name;
var level = event.source.value;
this.dataService.saveDataLevel(dataId, level, dgrId)
.subscribe(data => {
let message = data ? "Data level successfully saved." : "Failed to save data level. Please try again.";
this.snackBar.open(message, '', {
duration: 2000,
horizontalPosition: 'right',
verticalPosition: 'top'
});
});
}
openDialog(dataName, dgrId, levelId) {
this.dataService.getDataDescription(dgrId, levelId)
.subscribe(rd => {
this.dialog.open(LevelDescDialog, {
width: '600px',
data: {
name: dataName,
levelDescription: rd
}
});
});
}
}编辑:这是一个具有类似设置的StackBlitz URL：https://stackblitz.com/edit/angular-s2akjp。行为是一致的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-11-08 20:30:01
这是因为您没有将RadioButton上的更改保存到列表中。
要保存更改，请将(change)="setAssessmentLevel(assessment, 1)"添加到每个单选按钮中。
然后将一个setAssessmentLevel(assessment, level)方法添加到组件类中，该方法将level值持久化到列表中：
setAssessmentLevel(assessment, value) {
this.assessments[this.assessments.indexOf(assessment)] = {
...assessment,
level: value
};
}这是一个供您参考的Sample StackBlitz。
Stack Overflow用户
发布于 2018-11-08 20:34:52
您需要在数组中设置值，将评估和事件传递给方法并设置值。
将(change)="setValue(assessment, $event.value)"添加到每个垫单选按钮中。
<mat-radio-button (change)="setValue(assessment, $event.value)" [name]="assessment.id" value="1" [checked]="assessment.level == 1"></mat-radio-button>将此方法添加到组件中
setValue(assessment,assessmentLevel){
assessment.level = assessmentLevel
}Stack Overflow用户
发布于 2019-10-21 14:25:16
这个问题已经回答了。
我的答案是单数用法:为了只选择一个单选按钮，删除单选按钮组标签并单独使用它，如下所示：
<mat-radio-button [value]="row"></mat-radio-button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53214066
复制相关文章
相似问题
腾讯云开发者
