Question

所需的行为：用户将项目提交到表单（成功）后，强制表（同一页面）再次调用API并刷新项目。

应用程序结构：2个组件，一个表单和一个表，每个组件都有其自己对应的服务。

-我正在使用一些有疑问的约定的现有应用程序，并且在Angular中没有很好的背景

-我知道我们可以将项目推送到前端的表中，但是我想刷新组件

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

代码：

list.component

<dependency>
  <groupId>org.seleniumhq.selenium</groupId>
  <artifactId>selenium-api</artifactId>
  <version>3.14.0</version>
</dependency>

list.service

  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

form.component

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

form.service

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.
  }

所以您可以看到我并不完全了解Observable。需要一些有关如何按照我希望的方式进行工作的指导。在表单组件/服务中任何这些位置的成功处理后，我想调用列表项的.update（）方法。似乎这行不通，因为我没有正确连接两者。

将感谢您的一些建议。

Answer 1

这是伪代码：

控制器：

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)" ...>

Answer 2

我将以两种方式回答。您要求提供一个100％可行的Promise链，但是由于不必要的http调用，我建议您避免使用它。为什么要询问服务器您刚刚提供的信息？

首选（本地更新数据）：

http://localhost/library/public/dep/+id+

承诺链：

this.dataRulesListService.getRuleHistory().subscribe((dataRulesList: any) => {
  this.dataRulesList.push(dataRulesList);
});

Answer 3

在看到这些答案之前，我用EventEmitter解决了自己的问题：

https://angular.io/api/core/EventEmitter

现在，如果我理解正确，则不建议使用此方法，但是它可以正常工作，我也可以将其包括在内，以防其他人使用。

在执行POST的服务中：

import { EventEmitter } from '@angular/core';

//in class
eventEmitter: EventEmitter<any> = new EventEmitter();

//inside the post success, after form.reset(); in my code above:
this.eventEmitter.emit("anything");

在调用GET的组件中（而不是服务，该组件）：

import { PostService } from 'your post service location';
//import the service where you created the emitter here

//in class
constructor(xyz, private postService: PostService){ }

ngOnInit() {
  this.updateList();
  this.postService.eventEmitter.subscribe((resp) => this.updateList());
}

它是做什么的

POST服务中有一个事件发射器，它会发出事件。它发出的事件有一个字符串，但我们不在乎。

在GET组件中，我们使用等待该事件的事件侦听器对其进行初始化。再一次，我们得到了我们不关心的响应（resp）。我们只是在等待一个事件-任何事件-我们将调用updateList（），它将进行新的API调用并更新我们的组件。

不知道为什么会行得通，我以前的解决方案不会，但是嘿-如果行得通，那就行了。

如何在API POST之后强制执行API GET？

3 个答案:

首选（本地更新数据）：

承诺链：

如何在API POST之后强制执行A​​PI GET？

3 个答案:

首选（本地更新数据）：

承诺链：

如何在API POST之后强制执行API GET？