Angular 具有 Observable 实现的服务

Question

我遵循了很多示例来尝试让这个工作但很挣扎，而且似乎有很多不同的方法 - 所以我认为最好来这里得到答案。

简单来说......我有一个组件，我想在创建时从 JSON 文件加载一些数据，并在加载数据后显示它。

appData.model.ts

export interface AppData {
    lastUpdated: string;
}

data.service.ts

  getData(): Observable<AppData> {
    return this.http.get<AppData>('data.json?noCache=' + Math.random());
}

test.component.ts

export class TestComponent implements OnInit {
  obsAppData: Observable<AppData>

  constructor(private dataService: DataService) { }

  ngOnInit() {
    console.log('Test ngOnInit()');
    this.obsAppData = this.dataService.getData();
  }

然后我尝试在 html 模板中使用以下代码将 lastUpdated 的值打印到组件：

{{ obsAppData.lastUpdated | async }}

我在控制台中没有收到任何错误，但没有打印出任何内容！任何人都可以看到代码有什么问题或关于如何调试问题所在的任何建设性建议吗？我想我已经很好地掌握了 Angular，但可以肯定地说我正在努力处理事物的 Observable 方面。

Answer 1

您可以通过订阅从 observabnle return 类型获取数据。所以在这种情况下你需要做的是

this.dataService.getData().subscribe(value=> this.obsAppData = value)

这将从您的服务中获取异步操作的结果。

Answer 2

啊，我刚刚注意到你用错了。这应该有效

{{ (obsAppData | async).lastUpdated  }}

Answer 3

在您的服务中使用：

getData() {
    return this.http.get<AppData>('data.json?noCache=' + Math.random())
         .pipe(
            map((response: Response) => return response.json())
         )
}

在您的 component.ts 中使用：

export class TestComponent implements OnInit {
  appData: this.dataSericie.appData;
}

在您的 component.html 中使用您已经使用的内容：

{{ appData.lastUpdated | async }}

我可能误会了，但我认为您不需要对本地文件使用 Math.random()。

Angular 具有 Observable 实现的服务

Angular Service with Observable implementation

observable

angular-services

angular-pipe

angular

angular-observable