POST请求后如何实时刷新数据？

Question

I have a table which will show data. Everything is working fine for POST & GET request but I can see the values after inserting only if I refresh the page.

abc.service.ts

createExamCategory(options) {
    return this.http.post<{ message: string }>(this.url + '/createExamCategory', options);
}

getExamCategory():Observable<any> {
    return this.http.get<any>(this.url + '/getAllExamCategory');
}

abc.component.ts

onSubmit() {
    if(this.formdata.invalid) {
      return;
    }
    this.adminCategory.createExamCategory(this.formdata.value).subscribe(reponse => {
      console.log(reponse.message);
    }); 
}

ngOnInit() {
  this.columnsToDisplay = ['id', 'examCategoryName', 'isActive', 'Action'];
  this.adminCategory.getExamCategory().subscribe((reponse: any) => {
      this.ExamCategoryData = reponse.examCategoryList;
      this.dataSource = new MatTableDataSource(this.ExamCategoryData);
      this.dataSource.paginator = this.paginator;
  }, error => {
       console.log(error);
     }
  );
}

This is my code. What necessary changes do I need to make?

Answer 1

You have two options here:

1. Add the data that you sent to the POST request directly to the table.

2. GET the entire data set after you POST to refresh the table.

Answer 2

Put the data retrieval code into a separate method and reuse it in the POST subscription.

onSubmit() {
    if (this.formdata.invalid) {
        return;
    }
    this.adminCategory.createExamCategory(this.formdata.value).subscribe(reponse => {
        console.log(reponse.message);
        this.getData();
    });
}

ngOnInit() {
    this.columnsToDisplay = ['id', 'examCategoryName', 'isActive', 'Action'];
   this.getData();
}

private getData() {
    this.adminCategory.getExamCategory().subscribe(
        (reponse: any) => {
            this.ExamCategoryData = reponse.examCategoryList;
            this.dataSource = new MatTableDataSource(this.ExamCategoryData);
            this.dataSource.paginator = this.paginator;
        },
        error => {
            console.log(error);
        }
    );
}

Answer 3

There is an online example of how to Refresh the View of the Mat-Table. Mat Tables have no idea on their own if the data-source have changed, so you basically have to trigger the change detection. The following example is straight out of the example project....

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: Element[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}
];

Just a properly defined interface and example Dataset

// Displayed Columns, not important for the example
displayedColumns = ['position', 'name', 'weight', 'symbol'];
// We define the initial datasource
dataSource = new MatTableDataSource(ELEMENT_DATA);

Then what they do in the example, is basically refreshing the reference of the Array...

addElement() {
// With the array function push() we make it possible for the Mat-Tables to refresh the view
    ELEMENT_DATA.push({position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'})
    this.dataSource = new MatTableDataSource(ELEMENT_DATA);
  }

Source is from this project