Question

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

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

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

    constructor(public _itemService: DataService) {

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

}

这是DataService：

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>

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

Answer 1

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

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

这是一个很好的教程，使用Sock.js和STOMP来实现angular的websocket。

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

Answer 2

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

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并在创建新项目调用方法changeMessage的回调函数中将在您的数组中添加新创建的项目。看到这个example

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

Answer 3

将新项目添加到数据库后，您可以调用with io.BytesIO() as request, \ io.TextIOWrapper(request, encoding='utf-8') as req_str: json.dump({ 'name': 'try_genie', 'theres': 'more omitted'}, }, req_str) req_str.seek(0) request.seek(0) response = requests.post( url=self.host + self.endpoint, files=( ('request', (None, request, self.request_content_type)), ('attachment', ('query.hql', 'select "토탈", count(1) from products;' .encode(encoding='utf-8'), self.request_content_type)), ), )服务，该服务将在添加新项目时更新项目列表，或者您可以在File "/usr/local/Cellar/python@2/2.7.15/Frameworks/Python.framework/Versions/2.7/lib/python2.7/json/__init__.py", line 190, in dump fp.write(chunk) TypeError: write() argument 1 must be unicode, not str中调用selectItems（），因为每次执行该项目此时，已通过Angular的变化检测算法检查了给定组件的视图。此方法在每次后续执行ngAfterContentChecked（）之后执行。

将某项添加到Angular + Nativescript

3 个答案: