从API访问实时数据(访问Dynamo DB数据)，而不刷新Angular 6中的页面(异步)

Question

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

调用组件.ts 中的服务

WidServeService.ts API调用

尝试显示数据，

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

我使用dynamo数据库来存储数据，并试图使用上述方法访问它，我能够获得数据，但如果我用新数据更新数据库，我就无法看到角度动态更新的变化。页面需要始终刷新才能访问最新数据。我希望API中的实时数据能够异步显示，而无需刷新页面，有点像Ajax，但Ajax在Angular中无法按我需要的方式工作。

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

Answer 1

您可以使用EventEmitter。

角度中的事件发射器

创建事件发射器作为服务：

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