Доступ к данным в реальном времени из API (доступ к данным Dynamo DB) без обновления страницы (асинхронно) в Angular 6

Question

Я пытаюсь получить данные из API, используя HttpClientModule в Angular 6. Я использую метод подписки для подписки на его данные.

Вызов службы в component.ts

Вызов API WidServeService.ts

Пытаясь отобразить данные,

{{widgetarr}}  //In the component's HTML

Я использую Dynamo-DB для хранения данныхи я пытаюсь получить доступ к нему, используя вышеуказанный метод, я могу получить данные, но, если я обновлю БД новыми данными, я не смогу видеть изменения, обновляющиеся в угловых динамически.Страница должна быть обновлена ​​всегда для доступа к последним данным.Я хочу, чтобы данные в реальном времени из API отображались асинхронно без обновления страницы, вроде Ajax, но ajax не работает так, как мне нужно в Angular.

Также я сослался на документы Angular.io , я также попробовал метод асинхронного канала, он не работает.

Answer 1

вы можете использовать EventEmitter.

Emitter событий в Angular

Создать Emitter событий в качестве службы:

import { EventEmitter, Injectable } from '@angular/core';
@Injectable()
export class EventEmitterService {
  raiseEvent = new EventEmitter();
  constructor() { }
  onSaveAfter() {
    this.raiseEvent.emit();
  }
}

Компонент списка:

import { EventEmitterService } from "../../event-emitter/event-emitter.service";
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
})
export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
  constructor(private eventEmitter: EventEmitterService) {
    this.onSave();
  }
  onSave() {
    this.subscribeEvent = this.eventEmitter.raiseEvent.subscribe(data => {
      //your data fetching function to get data.
      this.fillGrid();
    });
  }
  }

Добавить Редактировать компонент:

import { EventEmitterService } from "../../event-emitter/event-emitter.service";
@Component({
  selector: 'app-add-edit',
  templateUrl: './add-edit.component.html',
  styleUrls: ['./add-edit.component.css'],
})
export class AddEditComponent implements OnInit, AfterViewInit, OnDestroy {
  constructor(private eventEmitter: EventEmitterService) {
  }
    //call this function after you updated data to refresh list.
    refreshList(){
        this.eventEmitter.onSaveAfter(); 
     }

  }