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

Question

我有一个表格，将显示数据。对于&request，一切正常，但只有在刷新页面时，我才能在插入后看到值。POSTGETabc.service.tscreateExamCategory(options) {    return this.http.post<{ message: string }>(this.url + '/createExamCategory', options);}getExamCategory():Observable<any> {    return this.http.get<any>(this.url + '/getAllExamCategory');}abc.component.tsonSubmit() {    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

您有两种选择：

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

2. 在 POST 刷新表后获取整个数据集。

Answer 2

有一个在线示例，说明如何刷新垫桌的视图。Mat Table 本身并不知道数据源是否已更改，因此您基本上必须触发更改检测。下面的示例直接来自示例项目....

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

  }

Answer 3

将数据检索代码放入单独的方法中，并在 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);

        }

    );

}