在Angular（Spring API）中刷新浏览器时如何避免重新加载表数据答案

【问题标题】：How to avoid reloading table data when browser is refreshed in Angular (Spring API)在Angular（Spring API）中刷新浏览器时如何避免重新加载表数据
【发布时间】：2020-07-04 09:01:07
【问题描述】：

我正在开发一个 web 应用程序，它通过 spring rest api 从后端获取数据，当刷新浏览器时，数据被复制到表中。

Spring API

@GetMapping("/members/first")
public ArrayList<Member> getFirst(){
    ArrayList<Member> firstList = new ArrayList<>();
    firstList .clear();

    arrayList.addAll(repository.findAll());
    for (Member m : arrayList){
       if (m instanceof First) {
                firstList.add(m);
       }
  }
    return firstList;
}

根据我的代码，Member 是超类，First 是子类。所以我只得到与 First 类相关的数据列表。
但是当浏览器刷新时，同样的数据又被添加了。如何阻止它？

角度组件

export class FirstComponent implements OnInit {

members: Member[];

constructor(
   private httpClientService: HttpClientService
) { }

ngOnInit(): void {
   this.httpClientService.getFirst().subscribe(
       response => {this.members = response;
       });
}
}

Http 服务

getFirst(){
   return this.httpClient.get<Member[]>('http://localhost:8080/api/members/first');
}

如下图所示，每次复制数据并输入表格时，浏览器都会刷新。

【问题讨论】：

标签： java angular spring spring-boot api

【解决方案1】：

首先确保您的 get API 将通过多次调用获得相同的结果，从您粘贴的代码来看，似乎 firstList 和 arrayList 都不是局部变量。这应该是一个问题。由于我们不了解 ArrayList 的含义，我不确定是否应该将其重置为空。至少 firstList 应在进入时重置为空。

其次，您忘记取消订阅订阅者，不确定是否是问题的原因，但显然是一个问题。

导出类 FirstComponent 实现 OnInit {

members: Member[];

private subscription = new Subscription();

constructor(private httpClientService: HttpClientService) {}

ngOnInit(): void {
    this.subscription.add(this.httpClientService.getFirst().subscribe(
        response => {
            this.members = response;
        }));
}

ngOnDestroy(): void {
    this.subscription.unsubscribe();
}

【讨论】：