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

Question

我有一个表格，将显示数据。对于&request，一切正常，但只有在刷新页面时，我才能在插入后看到值。POSTGET

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

     }

  );

}

这是我的代码。我需要进行哪些必要的更改？

Answer 1

您有两种选择：将发送到 POST 请求的数据直接添加到表中。在 POST 刷新表后获取整个数据集。

Answer 2

有一个在线示例，说明如何刷新垫桌的视图。Mat Table 本身并不知道数据源是否已更改，因此您基本上必须触发更改检测。下面的示例直接来自示例项目....export interface Element {&nbsp; name: string;&nbsp; position: number;&nbsp; weight: number;&nbsp; symbol: string;}const ELEMENT_DATA: Element[] = [&nbsp; {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},&nbsp; {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},&nbsp; {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},&nbsp; {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},&nbsp; {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},&nbsp; {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},&nbsp; {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}];只是一个正确定义的接口和示例数据集// Displayed Columns, not important for the exampledisplayedColumns = ['position', 'name', 'weight', 'symbol'];// We define the initial datasourcedataSource = new MatTableDataSource(ELEMENT_DATA);那么他们在示例中所做的，基本上是刷新数组的引用...addElement() {// With the array function push() we make it possible for the Mat-Tables to refresh the view&nbsp; &nbsp; ELEMENT_DATA.push({position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'})&nbsp; &nbsp; this.dataSource = new MatTableDataSource(ELEMENT_DATA);&nbsp; }

Answer 3

将数据检索代码放入单独的方法中，并在 POST 订阅中重用它。onSubmit() {&nbsp; &nbsp; if (this.formdata.invalid) {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; this.adminCategory.createExamCategory(this.formdata.value).subscribe(reponse => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(reponse.message);&nbsp; &nbsp; &nbsp; &nbsp; this.getData();&nbsp; &nbsp; });}ngOnInit() {&nbsp; &nbsp; this.columnsToDisplay = ['id', 'examCategoryName', 'isActive', 'Action'];&nbsp; &nbsp;this.getData();}private getData() {&nbsp; &nbsp; this.adminCategory.getExamCategory().subscribe(&nbsp; &nbsp; &nbsp; &nbsp; (reponse: any) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.ExamCategoryData = reponse.examCategoryList;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.dataSource = new MatTableDataSource(this.ExamCategoryData);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.dataSource.paginator = this.paginator;&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );}