1

我有一个带有表单的对话框。在单击保存插入数据后，将HTTP POST调用服务并将数据插入数据库。此对话框组件与显示表格（Mat Table）的父组件相连。HTTP GET此 Mat Table 从称为 insidegetTableData()方法的服务中获取其数据。面临的问题是，单击SAVE对话框的按钮（然后插入数据并关闭对话框）后，表格不会使用新插入的值进行更新。以下是我的代码供参考：

对话框组件

constructor(private adminService: AdminCategoryService, private fb: FormBuilder, private snackbarService: SnackbarService, public matDialogRef: MatDialogRef<CreateCategoryModalComponent>) {}

onSubmit() {
  this.adminService.createExamCategory(this.formdata.value).subscribe(response => {
    if(response.message == 'Duplicate exam category') {
      this.snackbarService.class = 'red-snackbar';
      return this.snackbarService.open('Exam Category Already Present !!');
    }
    this.snackbarService.class = 'green-snackbar';
    this.snackbarService.open('Exam Category Added Successfully');
    this.matDialogRef.close(); // Even after specifying mat-dialog-close in HTML I specified here also for being sure that the dialog closes
  });
}

对话框 HTML

<mat-dialog-actions>
        <button type="submit" mat-flat-button color="primary" mat-dialog-close cdkFocusInitial [disabled]="formdata.invalid">Save</button> // Here the "cdkFocusInitial" is also  throwing a warning
        <button mat-flat-button color="warn" mat-dialog-close>Close</button>
    </mat-dialog-actions>

cdkFocusInitial 警告消息

匹配“[cdkFocusInitial]”的元素不可聚焦。a11y.js:1510

对话框的父组件ts

openDialog() {
    const dialog = this.dialog.open(CreateCategoryModalComponent);
    dialog.afterClosed().subscribe(() => {
      this.ngOnInit(); // Firstly here I called "getTableData" then I thought that calling "ngOnInit" as it will refresh the full component.
    });
}

private getTableData() {
  this.adminCategory.getExamCategory().subscribe((reponse: any) => {
    this.isLoading = false;
    this.ExamCategoryData = reponse.examCategoryList;
    this.dataSource.data = this.ExamCategoryData;
    this.length = this.ExamCategoryData.length;
  }, error => {
      console.log(error);
  });
} 

ngOnInit() {
  this.columnsToDisplay = ['id', 'examCategoryName', 'isActive', 'Action'];
  this.dataSource = new MatTableDataSource<ExamCategory>();
  this.dataSource.paginator = this.paginator;
  this.isLoading = true;
  this.getTableData();
}

请帮助我在哪里遇到问题？同样在所看到的情况下，如果我按下Cancel对话框中的按钮也没有更新表格mat-dialog-close，表格也会被刷新。

PS有时表格的实时更新正在工作

4

0 回答 0