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的了解非常好，但是可以肯定地说，我正在努力观察事物的发展。

Answer 1

啊，我刚刚注意到您正在使用它。这应该起作用

{{ (obsAppData | async).lastUpdated  }}

Answer 2

您可以通过订阅从观察返回类型中获取数据。因此，在这种情况下，您需要做的是

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

在您的component.ts中使用：

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

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

{{ appData.lastUpdated | async }}

我可能会误会，但是我认为您不需要本地文件上的Math.random（）。

具有可观察实现的Angular Service

3 个答案: