如何在事件触发时在所有连接的设备上立即更新Angular2应用程序

Question

我需要用Angular2和Ionic2构建一个餐厅管理移动应用程序，并用Angular2为同一家餐厅构建一个网站，该网站不断建立http连接来存储和检索数据库中的数据，以维护最新数据。

例如，如果服务员的手机发出了订单请求，那么新订单就会被发布到数据库中，我可以完成这一操作。厨师需要得到新订单创建的即时通知。此外，这些数据需要反映在其他员工的手机和网站上。

我所能想到的只是使用setInterval，但由于我以前从未做过这样的事情，我不确定这是否是正确的方式。

component

orders: Order[];
constructor(private orderService: OrderService) {
setInterval(function() {
this.orderService
.getOrders()
.subscribe(
(orders: Order[]) => this.orders = orders,
(error: Response) => console.log(error)
)}, 3000);
}
placeanOrder(order) {
this.orderService.postOrder(order);
}

service

getOrders() Observable<any>{
this.http.get(...).map(...);
}
placeOrder(order) {
this.http.post(...).map(...);
}

当我尝试这样的操作时，我每秒都会在控制台上记录相同的错误。

无法读取未定义的属性"getOrders">

1. 为什么会出现错误
2. 如何将从服务器检索到的Observable json数据转换为我的接口数据类型(在本例中为Order类型)
3. 对此，有什么更好的方法

Answer 1

1. 导致回调使用错误！你必须使用箭头语法！

   • 错误：setInterval(function() {
   • 右：setInterval(() => {

2. 只需用正确的类型描述您的功能：

getOrders(): Observable<Order[]> {

不需要其他任何东西。属性名称必须相同(interface/json)！

3. 使用计时器是可以的。"Better"可能是与服务器的一个从未关闭的连接，所以服务器可以向您发送数据，客户端不必进行POLL。

   • https://www.websocket.org/
   • http://socket.io/