gpt4 book ai didi

json - 在 Angular 2 中使用 Observable 的 http 无法使用数据

转载 作者:搜寻专家 更新时间:2023-10-30 21:29:59 27 4
gpt4 key购买 nike

我是 Angular 2 和 Observables 的新手,但我想试一试。所以我安装了angular-cli并做了一个简单的测试项目。

我想让它做的只是读取一个 json 文件并处理组件内部的数据(最初的目的是提供服务,但我想从低端开始)。

所以我在 assets/json 文件夹中创建了一个 json 文件 (testjson.json):

{
"teststring": "test works"
}

然后我从 content.component.ts 文件中导入了来自 angular 的 http 和 rxjs 映射内容:

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

title: string = "Default";
data;

constructor(private http:Http) {
http.get('assets/json/testjson.json').map(res => res.json()).subscribe(data => {this.data = data; this.title = data.teststring; console.log(this.data);});
}

ngOnInit() {

}

}

到目前为止一切顺利,应用打印出以下内容:

app works!

test works [object Object]

但我想在整个组件中使用这些数据,而不仅仅是在构造函数中。但是如果我尝试在构造函数之外(在 ngOnInit 函数内)控制台记录“this.data”,它会在控制台中打印未定义。

我知道,它一定与异步加载有关,但不幸的是我不知道如何告诉应用程序等待 this.data 被填满。

我希望你能帮助我。当然,将来我想要一种服务来做那种事情,并且不止一个组件应该从中获取数据。

提前致谢!

最佳答案

  • 您应该将初始化代码移至初始化方法。
  • 回调完成后,您的数据就可用了。在您的模板中,一旦有数据,您可以使用 *ngIf 在 block 内执行代码。只要 *ngIf 不等于 true,内部代码就不会运行。
  • 您可以运行 console.log(data) 的唯一方法是从回调内部或从回调中调用,因为您必须等到数据加载完毕。

content.component.html

<div *ngIf="data">
<span>{{data.teststring}}</span>
</div>

content.component.ts

export class ContentComponent implements OnInit {

title: string = "Default";
data: any = null;

constructor(private http:Http) {
}

ngOnInit() {
this.http.get('assets/json/testjson.json')
.map(res => res.json())
.subscribe(data => {
this.data = data;
this.title = data.teststring;
console.log(this.data);
});
}
}

编辑

回应下面的评论 如果您抽象出对服务的 http 调用,您会发现完全相同的逻辑仍然适用。您仍在使用数据 promise 的概念,并且您可以在它完成后订阅该 promise 。这里唯一的区别是 http 调用被抽象到不同的类。

content.component.ts

export class ContentComponent implements OnInit {

title: string = "Default";
data: any = null;

// inject service
constructor(private contentService:ContentService) {
}

ngOnInit() {
this.contentService.getData()
.subscribe(data => {
this.data = data;
this.title = data.teststring;
console.log(this.data);
});
}

服务

export class ContentService {

constructor(private http:Http) {
}

getData(): IObservable<{teststring:string}> { // where string can be some defined type
return http.get('assets/json/testjson.json')
.map(res => res.json() as {teststring:string});
}

关于json - 在 Angular 2 中使用 Observable 的 http 无法使用数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41961693/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com