从API访问实时数据（访问Dynamo DB数据），而无需（异步）刷新Angular 6中的页面

Question

我正在尝试使用Angular 6中的HttpClientModule从API获取数据。我正在使用subscription方法来订阅其数据。

在component.ts中调用服务

WidServeService.ts API调用

试图显示数据，

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

我正在使用dynamo-db来存储数据，并且尝试使用上述方法访问它，但是我能够获取数据，但是，如果我使用新数据更新数据库，则无法查看更改动态更新的角度。 该页面需要始终刷新以访问最新数据。 我希望异步显示来自API 的实时数据而不刷新页面，有点像Ajax，但是ajax无法按我在Angular中的需要工作。

另外，我也参考了Angular.io文档，我也尝试了异步管道方法，它不起作用。

Answer 1

您可以使用EventEmitter。

Angular中的事件发射器

创建事件发射器即服务：

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(); 
     }

  }