[英]Access Real-time Data from an API (accessing Dynamo DB data) without refreshing the page (asynchronously) in Angular 6
I'm trying to GET data from an API using HttpClientModule in Angular 6. I'm using the subscribe method for subscribing to its data. 我正在尝试使用Angular 6中的HttpClientModule从API获取数据。我正在使用subscription方法来订阅其数据。
Calling the service in component.ts 在component.ts中调用服务
WidServeService.ts API call WidServeService.ts API调用
Trying to display the data, 试图显示数据,
{{widgetarr}} //In the component's HTML
I'm using dynamo-db to store the data, and i'm trying to access it using above method, I'm able to get the data, but, if I update the DB with new data, I'm not able to see the changes updating in angular dynamically. 我正在使用dynamo-db来存储数据,并且尝试使用上述方法访问它,但是我能够获取数据,但是,如果我使用新数据更新数据库,则无法查看更改动态更新的角度。 The page needs to be refreshed always in order to access the latest data. 该页面需要始终刷新以访问最新数据。 I want real-time data from the API to be displayed asynchronously without refreshing the page, kind of like Ajax, but ajax doesn't work the way I need it to in Angular. 我希望异步显示来自API 的实时数据而不刷新页面,有点像Ajax,但是ajax无法按我在Angular中的需要工作。
Also, I've referred the Angular.io docs as well, I've tried the async pipe method as well, it doesn't work. 另外,我也参考了Angular.io文档,我也尝试了异步管道方法,它不起作用。
you can use EventEmitter. 您可以使用EventEmitter。
Event Emitter in Angular Angular中的事件发射器
Create a Event Emitter as Service: 创建事件发射器即服务:
import { EventEmitter, Injectable } from '@angular/core';
@Injectable()
export class EventEmitterService {
raiseEvent = new EventEmitter();
constructor() { }
onSaveAfter() {
this.raiseEvent.emit();
}
}
List Component: 列表组件:
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();
});
}
}
Add Edit Component: 添加编辑组件:
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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.