0

我已经遵循了许多示例来尝试使其正常工作，但正在苦苦挣扎，并且似乎有很多不同的方法-因此最好来这里获得答案。

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

appData.model.ts

export interface AppData {
    lastUpdated: string;
}

数据服务.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 方面的问题。

4

3 回答 3

0

啊，我刚刚注意到你用错了。这应该工作

{{ (obsAppData | async).lastUpdated  }}
于 2018-07-23T12:36:47.413 回答
-1

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

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

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

于 2018-07-23T12:22:48.967 回答
-1

在您的服务中使用：

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() 。

于 2018-07-23T12:42:15.900 回答