Question

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

试图显示数据，

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

我正在使用dynamo-db存储数据，并且尝试使用上述方法访问它，我能够获取数据，但是，如果我使用新数据更新数据库，无法看到更改动态更新的角度。该页面需要始终刷新以访问最新数据。我希望异步显示来自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中的页面

1 个答案: