如何自动更新页面上的数据，Angular 7 和 Spring Boot

Posted 2023-02-16

【中文标题】如何自动更新页面上的数据，Angular 7 和 Spring Boot

【英文标题】：How to auto-update data on the page, Angular 7 and Spring Boot

【发布时间】：2019-02-16 14:00:46

【问题描述】：

我正在尝试实现数据实时更新的页面。我试图为此实现一些网络套接字，但基本上所有示例和教程都存在，需要发送消息（我的项目中的想法是，数据将从不同的源加载，因此我没有任何帖子函数，只能获取）。情况变得越来越复杂，因为这基本上是详细信息页面，它通过特定的 id 加载结果。

因此我的问题是 - 我怎样才能实现实时更新？

这是来自 Controller.java

@GetMapping("data/data_id")
public Optional<Data> findByData_id(@PathVariable("data_id") Long data_id)
Optional<Data> data = dataRepository.findById(data_id);
return data;

来自 data.service.ts

getDataById(data_id: number): Observable<any> 
return this.http.get<Data[]>('http://localhost:8080/data/' + data_id)

来自 data.details.component.ts

const tracker_id = +this.route.snapshot.params["data_id"];
this.data_table.getDataById[data_id]
.subscribe(data_table=> 
this.data_table.data_table = data_table as Data[];
this.data_table_var = this.data_table.data_table;

【问题讨论】：

请说明您如何在组件中使用getDataById()

@dileepkumarjami 已编辑并在组件中获取数据

【参考方案1】：

如果你想实时更新数据，你需要使用 web socket。

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) 
        registry.addEndpoint("/socket")
                .setAllowedOrigins("*")
                .withSockJS();
    

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) 
        registry.setApplicationDestinationPrefixes("/app")
                .enableSimpleBroker("/chat");
    

这是很好的参考 https://medium.com/oril/spring-boot-websockets-angular-5-f2f4b1c14cee

【讨论】：

我试图通过这个 guid 来实现，但不太明白如何将它应用到我的模型中。