Обновить список Просмотр элементов при добавлении элемента в базу данных в Angular + Nativescript - PullRequest
Новая
       19

Обновить список Просмотр элементов при добавлении элемента в базу данных в Angular + Nativescript

0 голосов
/ 22 мая 2019

У меня есть приложение, которое сохраняет элементы в базе данных sqlite и показывает их в виде списка. Он загружает представление списка с правильными данными в начале приложения, но не обновляет представление списка, когда я добавляю новый элемент в базу данных.

Это 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>

Он загружает только элементы в представление списка в начале приложения, но я хочу обновить его при добавлении элемента.

Ответы [ 3 ]

1 голос
/ 22 мая 2019

Простым решением было бы либо запустить новый запрос на получение списка после добавления нового элемента, либо просто добавить его в память на внешнем интерфейсе, если вы получите успешный ответ на запрос на сохранение.Однако, хотя это будет работать, это не очень хорошее решение. Это не будет обновлять список, когда другой пользователь добавит элемент.

Я думаю, вы должны использовать websockets для этого.Вы можете открыть сокет для прослушивания сообщений на внешнем интерфейсе.Серверная часть будет выдавать сообщение каждый раз, когда что-то добавляется, даже если оно было добавлено другим пользователем.Внешний слушатель добавил бы этот элемент в список.

Вот хороший учебник, использующий Sock.js и STOMP для реализации веб-сокетов в угловом формате.

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

0 голосов
/ 22 мая 2019

После добавления нового элемента в базу данных вы можете вызвать службу selectItems(), которая будет обновлять список элементов при каждом добавлении нового элемента, или вы можете вызвать selectItems () в ngAfterViewChecked() hook, поскольку он выполняется каждый раз при просмотреданный компонент был проверен алгоритмом обнаружения изменений Angular.Этот метод выполняется после каждого последующего выполнения ngAfterContentChecked ()

0 голосов
/ 22 мая 2019

Вы можете создать сервис для рассылки со списком вашего элемента, например так: 

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, который добавит новый созданный элемент в ваш массив. Смотрите этот пример

И не забудьте подписаться на изменения в вашем списке компонентов.

...