具有Observable实现的Angular Service

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

测试组件.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

啊，我刚刚注意到你在用wroong。这应该工作

{{ (obsAppData | async).lastUpdated  }}

Answer 2

您可以通过订阅observinle返回类型来获取数据。所以在这种情况下，你需要做的是

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

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

Answer 3

在您的服务中使用：

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

在组件中使用：

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

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

{{ appData.lastUpdated | async }}

我可能搞错了，但我认为你不需要本地文件上的Math.random((。