Angular Material: Mat Table sometimes get updated in real-time sometimes not

user_13033071 0
Viewed 702

I've a Mat Table which calls a GET request. Also I've a Mat Dialog which takes data and on Save click calls POST request. Everything is working fine but the table sometimes get updated after I click the Save button but sometimes not (I've to reload the page and to see it updated).

mat-dialog.component.ts

onSubmit() {  // This method is called on the button click in Mat-Dialog
    if(this.formdata.invalid) {
      return;
    }
    this.adminService.createQuestionCategory(this.formdata.value).subscribe(reponse => {
      this._snackBar.open('New Question Category Added Successfully', '', {
        duration: 7500,
        horizontalPosition: this.horizontalPosition,
        verticalPosition: this.verticalPosition
      });
    });
  }

main.component.ts

constructor(private adminCategory: AdminCategoryService, private fb: FormBuilder, public dialog: MatDialog) { 
    dialog.afterAllClosed.subscribe(() => {
      console.log(''); // This line gets called everytime on close of the modal
      this.getTableData(); // So this line also gets called but not re-render the template updated everytime
    });
}

openDialog() {
    this.dialog.open(CreateSectionModalComponent);
}

private getTableData() {
    this.columnsToDisplay = ['id', 'questionCategoryName', 'isActive', 'Action'];
    this.adminCategory.getQuestionCategory().subscribe((reponse: any) => {
          this.QuestionCategoryData = reponse.questionCategoryList;
          this.dataSource = new MatTableDataSource<QuestionCategory>(this.QuestionCategoryData);
          this.dataSource.paginator = this.paginator;
        }, error => {
          console.log(error);
        });
}

ngOnInit() {
    this.getTableData();
}

Is there anything am missing ?

mat-dialog angular9 angular-material angular typescript
3 Answers

Change your ngOnInit() and getTableData() to this

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

private getTableData() {
    this.adminCategory.getQuestionCategory().subscribe((reponse: any) => {
          this.QuestionCategoryData = reponse.questionCategoryList;
          this.dataSource.data = this.QuestionCategoryData;
        }, error => {
          console.log(error);
        });
}

Here you are initializing the mat-table and then just updating the data.

user_33898280

What i see from your sample codes is you are adding new data from the dialog and then fetching the table data again when dialog is closed. But there is no proof that your data was saved at that time. I'd suggest not saving data in your dialog code, instead return the data entered on your dialog to your main component when onSubmit called, and call the this.adminService.createQuestionCategory() service method in your main component, and then call getTableData() inside subscribe. This way you'll be sure that you fetch data after new data was recorded.

user_17432220

according to your code there is no implementation for update mat-table after submit().Once you subscribe from submit, juset execute changeDetectorRefs & renderRows() from Mat-table before show snack bar

@ViewChild(MatTable, { static: true }) table: MatTable<any>;
constructor(private changeDetectorRefs: ChangeDetectorRef)

    onSubmit() {
        if(this.formdata.invalid) {
          return;
        }
        this.adminService.createQuestionCategory(this.formdata.value).subscribe(reponse => 
         {

           this.changeDetectorRefs.detectChanges();
           this.table.renderRows();
          this._snackBar.open('New Question Category Added Successfully', '', {
            duration: 7500,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition
          });
        });
      }
user_24082660
Related