Angular/Aggrid: 将此 GET 请求函数转换为服务的正确方法？

Question

我正在将数据从 json 服务器加载到数据网格 Ag 网格。现在我可以在网格中很好地显示数据，我设置了一个间隔函数，每 5 秒发出一次获取请求，并将任何更新的数据显示到网格中。这一切都很好。现在这对我拥有的一些数据来说工作正常，因为这个特定数据将不断地由服务器 changed/updated，而不是用户。

export class TableComponent implements OnInit {

rowData: any[];
columnDefs: any

constructor(...) {
this.columnDefs =[
{headerName: "data", field: "data"}
]
}
ngOnInit() {
      this.service.getData('http://localhost:3000/employees')
      this.refreshData();
      this.interval = setInterval(() => { 
          this.refreshData(); 
        }, 5000);
      }

      ngOnDestroy() {
        this.subscription.unsubscribe();
        clearInterval(this.interval);
      }

      refreshData(){
        this.service.getData('http://localhost:3000/employees')
            .subscribe(data => {
                this.rowData = data;            
             })
      }

但我有一个表单，用户可以在其中输入自己的数据，并将其保存到服务器。我希望我的表单组件使用 refreshData() 这样它就不必等待 x 秒数 post 到网格。这是 saveUser 函数：

saveUser() {
       this.employeeInfo = this.frmUser.getRawValue();
       var url = 'http://localhost:3000/employees';
       this.http.post(url, this.employeeInfo, httpOptions)
         .subscribe((res: any) => {
           this.service.refreshData(//unsure what to pass here)
            //unsure how to pass the data to the rowData from the TableComponent 
            //res = ?
           this.dialogRef.close({
             success: "success"
           });
         });
     }

调用我的 getData 服务不会更新 table。 这是因为我不确定如何将数据传递给 rowData，因为我在 FormComponent 中工作。 RowData 在 TableComponent

中初始化

我尝试创建服务，但 rowData 仍未更新。当运行代码时，没有新的事情发生。

//service       
getData(url: string): Observable<any> {
      return this.http.get(url).pipe(
        map(this.extractData),
        catchError(this.handleErrorObservable));

    }
      private extractData(res: Response) {
        let body = res;
        console.log(res)
        return body || {};
      }

    refreshData(data) {
      this.getData(this._url) 
      .subscribe(result => {
       data = result
       console.log(data)
      });
    }

问题：如何正确地将 refreshData 转换为服务，以便我可以在我的表单组件中使用它class？看来我只缺少一个将数据传输到 rowData 的方法谢谢！

Answer 1

saveUser() 应该是从组件中的函数调用的服务，我将其命名为 onSave()。该函数将订阅服务，然后在组件中处理请求成功。

编辑：如果您希望将它们放在 2 个单独的组件中，并且您希望在向 table 添加新值后强制更新 table，您将需要使用类似 EventEmitter 的东西。

//example.component.ts
ngOnInit() {
  this.refreshData();
  this.interval = setInterval(() => { 
      this.refreshData(); 
    }, 5000);
  }

ngOnDestroy() {
    this.subscription.unsubscribe();
    clearInterval(this.interval);
}

refreshData() {
    this.service.getEmployeeData()
        .subscribe(data => {
            this.rowData = data;            
        });
}

// Called when the user clicks save on the form
onSave() {
    const newUser = this.formUser.getRawValue();
    this.service.saveUser(newUser)
        .subscribe(() => {
            this.refreshData()
            this.dialogRef.close({
                success: "success"
            });
        })
}

//example.service.ts
const url = 'http://localhost:3000/employees';
saveUser(employeeInfo: any): Observable<any> {
   //adds an entry to employee data
   return this.http.post(url, this.employeeInfo, httpOptions)
}

getEmployeeData(): Observable<any> {
    //retrieves all the employee data entries
    return this.http.get(url).pipe(
        map(res => res || {}),
        catchError(this.handleErrorObservable)
    );
}

Angular/Aggrid: 将此 GET 请求函数转换为服务的正确方法？

Angular/Aggrid: Proper way to turn this GET request function into a service?

httpclient

rxjs

ag-grid

angular