时间戳

首页 > 解决方案 > 如何在 API POST 之后强制 API GET？

angular - 如何在 API POST 之后强制 API GET？

问题描述

期望行为：用户向表单提交项目（成功）后，强制表（同一页面）再次调用 API 并刷新项目。

App结构：2个Component，一个Form和一个Table，每个都有自己对应的Service。

- 我正在使用一些有问题的约定的现有应用程序，并且我在 Angular 方面没有良好的背景

-我知道我们可以将项目推送到前端的表格，但我宁愿刷新组件

- 寻找类似于 React 的 Promise 链接或每次执行 API POST 时返回 api GET 结果的解决方案。

代码：

列表组件

  public dataRulesList: Array<MonitoringRule> = [];

  constructor(private dataRulesListService: DataRulesListService) { }

  ngOnInit() {
    this.updateList();
  }

  public updateList() {
    this.dataRulesListService.getRuleHistory().subscribe((dataRulesList: any) => {
      this._updateHistory(dataRulesList);
    });
  }

  private _updateHistory(dataRulesList: Array<MonitoringRule>): void {
    this.dataRulesList = dataRulesList;
    this._loadHistory();
  }
  //snip

列表服务

constructor(private http: HttpClient) { }

  private _dataRulesList: Array<MonitoringRule> = [];

  //getter - setter

  public getRuleHistory(): Observable<Array<MonitoringRule>> {
    return this._fetchRuleHistory().do((res: any) => {
      this.dataRulesList = [];
      res.forEach((rule) => {
        this.setRuleHistoryListItem(rule);
      });
    }).map(() => {
      return this._dataRulesList;
    })
  }

  public setRuleHistoryListItem(ruleHistoryResponse: any) {
    const ruleHistory = new MonitoringRule();

    //construct rule item

    this._dataRulesList.push(ruleHistory)
  }

  private _fetchRuleHistory() {
    return this.http.get(`${environment.API_URL}rules/history`)
  }

表单组件

constructor(private http: HttpClient, private dataRulesService: DataRulesService, private dataRulesList: DataRulesListComponent, private dataRulesListService: DataRulesListService) { }

  ngOnInit() {
    //form logic
  }

  onSubmit(form: NgForm, dataRulesList = this.dataRulesList) {
    this.dataRulesService.createRuleRequest(this.rule, form, dataRulesList);
  }

  newRule(form: NgForm) {
    this.rule.reset();
    form ? form.reset() : null;
    // can I call list.updateHistory from here? Did not work.
  }

表单服务

constructor(private http: HttpClient, private pwsNotificationService: PwsNotificationService) { }

  public createRuleRequest(rule: Rule, form: NgForm, dataRulesList: DataRulesListComponent) {
    //form logic
   this._postCreateRuleRequest(rule, form, dataRulesList)
  }

  private _postCreateRuleRequest(rule: Rule, form: NgForm, dataRulesList: DataRulesListComponent) {
    this.http.post(`${environment.API_URL}rules/create`, rule).subscribe((response: any) => {
      this.pwsNotificationService.add({
        type: 'success',
        msg: `Rule Created!`,
        timeout: 5000
      });
      rule.reset();
      form.reset();
      //tried calling list.updateHistory from here
    }, () => {
      this.pwsNotificationService.add({
        type: 'danger',
        msg: `POST Request Failed. Please contact the Data Monitoring Team.`,
        timeout: 5000
      });
    }//tried adding a .complete function here);
  }

所以你可以看到我并不完全理解 Observables。需要一些关于如何按照我想要的方式进行这项工作的指导。在表单组件/服务中的任何这些地方成功后，我想调用列表项的 .update() 方法。似乎这不起作用，因为我没有正确连接两者。

将不胜感激一些建议。

标签： angular

解决方案

这是伪代码：

控制器：

data = Observable<Record[]>;//defer sub to templ

saveAndRefresh() {
   let formData = getFormData(someFormGroup);//FormGroup param or instance var

   //assign ret Obs to this.data
   this.data = this.myService.save(formData).mergeMap(() => {
       return this.myService.getData();//refresh data
   });
}

模板：

<form or button (click or ngSubmit)="saveAndRefresh()">
...
   <tr *ngFor="let d of (data | async)" ...>

推荐阅读