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

我有一张表，可以显示数据。对于

POST

&

GET

请求，一切正常，但只有在刷新页面时，我才能看到插入后的值

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');
}

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);
     }
  );
}

---

这是我的密码。我需要做哪些必要的更改？

这里有两个选项：

将发送到POST请求的数据直接添加到表中

在发布以刷新表后获取整个数据集

---

将数据检索代码放入单独的方法中，并在后期订阅中重用它

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);
        }
    );
}

---

有一个联机示例，介绍如何刷新Mat表的视图。Mat表本身不知道数据源是否已更改，因此基本上必须触发更改检测。以下示例直接来自示例项目

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'}
];

只是一个正确定义的接口和示例数据集

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

然后他们在示例中所做的，基本上是刷新数组的引用

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);
  }

---

插入到何处后，源来自

？在您的后端数据存储中的某个位置？angular应用程序无法知道是否有任何更改…它只是一个标准html表格，还是您正在使用任何特定的表格？@ak.leimrey am using Mat table