WedX - журнал о программировании и компьютерных науках

Как обновить пользовательский интерфейс после обещания в сервисе, возвращенного из базы данных

Я хочу загрузить объект из indexed-db и заполнить форму этими данными в пользовательском интерфейсе. Я использую этот метод в службе, и мой компонент вызывает службу на ngOnInit(). Как мой компонент узнает, доступны ли данные?

service.ts

 private loadFromInMemory(): IConfigEntity {
    this.db.getByKey(this.dbStoreName, 1).then(
      dbContent => {
        console.log(dbContent);
      },
      error => {
        console.log(error);
      }
    );

   return null;
}

component.ts

 ngOnInit() {
    const config = this.configService.load();
    this.testValue = config.test;
    this.test2Value = config.test2;

  }
typescript angular promise indexeddb
29.04.2019

Ответы:


1

Использование rxJs для управления состоянием:

в package.json

"rxjs": "6.2.1",

в сервисе:

import {BehaviorSubject} from 'rxjs/BehaviorSubject';

public onDataChanged: BehaviorSubject<any> = new BehaviorSubject([]);

private loadFromInMemory(): IConfigEntity {
    this.db.getByKey(this.dbStoreName, 1).then(
      dbContent => {
        this.onDataChanged.next(dbContent);
      },
      error => {
        console.log(error);
      }
    );

   return null;
}

в компоненте:

import {Subscription} from 'rxjs/Subscription';

private onDataChanged: Subscription;

ngOnInit() {
    this.onUsersListChanged = 
       this.sharedService.onUsersListChanged.subscribe(data => {
         cosnole.log(data) // access to shared data :)
    })
}

public ngOnInit() {
    // Do not forget to unsubscribe the subscription
    this.onDataChanged.unsubscribe();
}
29.04.2019

2

В вашем сервисе возврат

loadFromInMemory(storename, id) {
    return this.db.getByKey(storename, id);
}

Затем в вашем файле компонента вызовите служебную функцию

constructor (private myservice: ServiceName){}
this.myservice.loadFromInMemory(storename, id).subcribe(
      dbContent => {
        console.log(dbContent);
      },
      error => {
        console.log(error);
      }
    );
29.04.2019
Новые материалы
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
Для любых предложений по сайту: [email protected]