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

Question

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

Calling the service in component.ts

WidServeService.ts API call

正在尝试显示数据，

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

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

中按照我需要的方式工作

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

Answer 1

你可以使用 EventEmitter。

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

  }

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

Access Real-time Data from an API (accessing Dynamo DB data) without refreshing the page (asynchronously) in Angular 6

web-services

typescript

angular-services

angular

angular-httpclient