时间戳

首页 > 解决方案 > 在Angular + Nativescript中将项目添加到数据库时刷新列表视图项目

javascript - 在Angular + Nativescript中将项目添加到数据库时刷新列表视图项目

问题描述

我有一个将项目保存在 sqlite 数据库中并在列表视图中显示它们的应用程序。它在应用程序开始时使用正确的数据加载列表视图，但是当我向数据库添加新项目时它不会刷新列表视图。

这是我将项目加载到可观察对象的 component.ts

export class HomeComponent implements OnInit {
    items: ObservableArray<IDataItem>;

    constructor(public _itemService: DataService) {

    }
    ngOnInit(): void {
        this.items = this._itemService.selectItems();
    }

}

这是数据服务：

export class DataService {

    private items = new ObservableArray<IDataItem>();
    private database = new DatabaseService();
    private db: any;

    selectItems(): ObservableArray<IDataItem> {
        this.database.getdbConnection()
         .then(db => {
          db.all("SELECT * FROM items").then(rows => {
           for (let row in rows) {
            this.items.push({ id: rows[row][0], sitioWeb: rows[row][1], usuario: rows[row][2], password: rows[row][3] });
           }
           this.db = db;
          }, error => {
           console.log("SELECT ERROR", error);
          });
         });
         for(let i = 0; i < this.items.length; i++){
            Toast.makeText(""+this.items[i].id+" "+this.items[i].sitioWeb+" "+this.items[i].usuario+" "+this.items[i].password,"10")
         }
         return this.items;
       }

    getItems(): ObservableArray<IDataItem> {
        return this.items;
    }

    getItem(id: number): IDataItem {
        return this.items.filter((item) => item.id === id)[0];
    }
}

这是列表视图所在的视图：

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page page-content" >
    <ListView [items]="items | async" class="list-group" >
        <ng-template let-item="item">
            <Label [nsRouterLink]="['../item', item.id]" [text]="item.sitioWeb" class="list-group-item"></Label>
        </ng-template>
    </ListView>
</GridLayout>

它只在应用程序的初始化时将项目加载到列表视图中，但我想在添加项目时刷新它。

标签： javascriptangularsqlitenativescriptnativescript-angular

解决方案

一个简单的解决方案是在添加新项目后触发新请求以获取列表，或者如果您从保存请求中获得成功响应，则只需将其添加到前端的内存中。然而，虽然这可行，但它不是一个很好的解决方案。当另一个用户添加项目时，它不会更新列表。

我认为您应该考虑为此使用websockets 。您可以在前端打开一个套接字以侦听消息。每次添加某些内容时，后端都会发出一条消息，即使它是由另一个用户添加的。前端侦听器将该项目添加到列表中。

这是一个使用Sock.js和STOMP以 Angular 实现 websockets的好教程。

https://g00glen00b.be/websockets-angular/

推荐阅读