为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

胡子哥哥 2022-09-23 21:29:24

我有一个表格,将显示数据。对于&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);

     }

  );

}

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


查看完整描述

3 回答

?
哔哔one

TA贡献1536条经验 获得超7个赞

您有两种选择:

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

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


查看完整回答
反对 回复 2022-09-23
?
慕少森

TA贡献1669条经验 获得超9个赞

有一个在线示例,说明如何刷新垫桌的视图。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);

  }


查看完整回答
反对 回复 2022-09-23
?
Helenr

TA贡献1471条经验 获得超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);

        }

    );

}


查看完整回答
反对 回复 2022-09-23
  • 3 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信