У меня есть таблица данных материала Angular 6, и в каждой строке таблицы у меня есть группа переключателей.Событие вызывается для вызова API, когда для определенной строки выбран переключатель.Все работает хорошо до этого момента.Однако, если таблица данных имеет более одной страницы, и я перехожу на вторую страницу, а затем возвращаюсь на первую страницу, переключатель, который отображается как выбранный, является тем, который был первоначально выбран при первой загрузке страницы;не обновленный выбор.Когда я обновляю страницу, данные перезагружаются, и выбирается правильный переключатель (вызов API успешно обновляет базу данных).Не уверен, имеет ли это смысл.Вот пример строки в таблице:
Когда страница загружается впервые, в этой группе переключателей выбирается опция Промежуточное звено.Если бы я должен был выбрать опцию «Начинающий», радиокнопка «Начинающий» выбирается, как и ожидалось, и значение успешно сохраняется в базе данных с помощью вызова API.Когда я перехожу на вторую страницу, а затем возвращаюсь на первую страницу, переключатель выбирается для промежуточного, а не для начинающего.Кажется, что состояние теряется, когда я перехожу на страницу 2.
Я удалил атрибуты (изменить) и [проверено] из переключателей, чтобы посмотреть, что произойдет.В этот момент параметры не были выбраны при первой загрузке страницы.Когда я сделал выбор, перешел на страницу 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
}
});
});
}
}
Редактировать: Вот URL StackBlitz саналогичная настройка: https://stackblitz.com/edit/angular-s2akjp. Поведение соответствует.