时间戳

首页 > 解决方案 > 需要使用 web api 服务在 Angular11 中显示新添加的记录/行而不刷新页面

angular11 - 需要使用 web api 服务在 Angular11 中显示新添加的记录/行而不刷新页面

问题描述

组件.ts

ngOnInit() {
    this.employeeservice.getEmp_ServiceFun().subscribe(
      (data: Employee[]) => this.employees = data,
      error => this.error = error
    );
  }

服务.ts

constructor(private http: HttpClient) { }

  public getEmp_ServiceFun(): Observable<Employee[]> {

    return this.http.get<Employee[]>(this.serverUrl + 'employees')
    .pipe(
      catchError(this.handleError)
      );
  }

标签： angular11

解决方案

再次运行 ngoninit 方法对我来说似乎有点奇怪，因为它只运行一次。我会将 employeeservice 方法包装在一个可观察的间隔中。不要忘记取消订阅。否则它将继续调用 getEmp_ServiceFun 直到整个应用程序关闭

ngOnInit() {
    interval(1000).pipe(
        map(() => {this.employeeservice.getEmp_ServiceFun().subscribe(
            (data: Employee[]) => this.employees = data,
            error => this.error = error
        );})}

这将替换整个数组，而不是仅仅添加到它。我会再看一下 getEmp_ServiceFun，这样您就可以只请求新数据而不是所有数据，然后将其推送到数组中。

编辑：更好的是不在地图中订阅，而是将其移动到管道之后。您可能需要使用 switchMap

推荐阅读