Question

我有一个Angular 6材质数据表，并且在该表的每一行中都有一组单选按钮。当为特定行选择了单选按钮时，会触发一个事件以进行API调用。到目前为止，一切正常。但是，如果数据表有多个页面，并且我导航到第二页，然后返回到第一页，则显示为选中状态的单选按钮是首次加载该页面时最初选择的按钮；不是更新的选择。当我刷新页面时，数据将重新加载，并且选择了正确的单选按钮（API调用成功更新了数据库）。不知道这是否有意义。这是表中一行的示例：

首次加载页面时，在此单选按钮组中选择了“中间”选项。如果要选择Beginner选项，则按预期选择Beginner的单选按钮，然后通过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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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。行为是一致的。

Answer 1

那是因为您没有将RadioButton上的更改保存到列表中。

要保存更改，请将(change)="setAssessmentLevel(assessment, 1)"添加到每个单选按钮。

然后在您的组件类中添加一个setAssessmentLevel(assessment, level)方法，该方法将level值保留到您的列表中：

setAssessmentLevel(assessment, value) {
  this.assessments[this.assessments.indexOf(assessment)] = {
    ...assessment,
    level: value
  };
}

这是您推荐的Sample StackBlitz。

Answer 2

您需要在数组中设置值，将评估和事件传递给方法并设置值。

将(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
  }

Answer 3

问题已经回答。

我的回答是单数使用：为了使仅选择一个单选按钮成为可能，请删除单选按钮组标签并单独使用，如下所示：

<mat-radio-button [value]="row"></mat-radio-button>

带单选按钮的Angular 6材料数据表

3 个答案: