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

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

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

导出类HomeComponent实现OnInit{ 项目：可观察的耳环； constructorpublic\u itemService:DataService{ } 恩戈尼尼特：空虚{ this.items=this.\u itemService.selectItems； } } 这是数据服务：

导出类数据服务{ 私人物品=新的可观察物品； 私有数据库=新数据库服务； 私人db：任何； selectItems:ObservableArray{ this.database.getdbConnection .thendb=>{ db.allSELECT*FROM items.thenrows=>{ 让我们排成一行{ this.items.push{id:rows[row][0]，sitioWeb:rows[row][1]，usuario:rows[row][2]，密码：rows[row][3]}； } 这个.db=db； }，错误=>{ console.logSELECT错误，错误； }; }; forlet i=0；iitem.id==id[0]； } } 这是listview所在的视图：

<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>

---

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

您可以使用项目列表创建共享服务，如下所示：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

其中currentMessage是您的项目列表。将该列表绑定到html，并在回调函数中调用createnewitem方法changeMessage，该方法将在数组中添加新创建的项。 看到这个了吗

---

不要忘了订阅列表组件中的更改。

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

我想你应该研究一下这个的用途。您可以打开一个套接字，监听前端的消息。后端将在每次添加某个内容时发出消息，即使它是由另一个用户添加的。前端侦听器会将该项添加到列表中

这是一个很好的教程，使用和在angular中实现WebSocket

---

向数据库中添加新项目后，您可以调用selectItems服务，该服务将在添加新项目时更新项目列表，或者您可以在ngAfterViewChecked钩子中调用selectItems，因为每次使用Angular的更改检测算法检查给定组件的视图时都会执行该钩子。每次后续执行ngAfterContentChecked后，此方法都会执行。一旦向数据库添加新项目，您可以调用selectItems服务，该服务将在添加新项目时更新项目列表。问题在于，添加方法和listview位于不同的组件中。我编辑以在ngAfterViewChecked钩子中显示add componentcall selectItems。我真的不明白你的意思，你能解释一下吗？@JavirGallegosGarcía我为你创建了一个示例，请看