我正在使用 Angular 5,并且我使用 angular-cli 创建了一个服务
我想要做的是创建一个读取 Angular 5 本地 json 文件的服务。
这就是我所拥有的……我有点卡住了……
import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
@Injectable()
export class AppSettingsService {
constructor(private http: HttpClientModule) {
var obj;
this.getJSON().subscribe(data => obj=data, error => console.log(error));
}
public getJSON(): Observable<any> {
return this.http.get("./assets/mydata.json")
.map((res:any) => res.json())
.catch((error:any) => console.log(error));
}
}
我怎样才能完成这项工作?
最佳答案
首先你必须注入(inject) HttpClient
而不是 HttpClientModule
,
您必须删除的第二件事 .map((res:any) => res.json())
您将不再需要它,因为新的 HttpClient
将提供你默认的响应体,最后确保你在 AppModule
中导入 HttpClientModule
:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AppSettingsService {
constructor(private http: HttpClient) {
this.getJSON().subscribe(data => {
console.log(data);
});
}
public getJSON(): Observable<any> {
return this.http.get("./assets/mydata.json");
}
}
将此添加到您的组件中:
@Component({
selector: 'mycmp',
templateUrl: 'my.component.html',
styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
constructor(
private appSettingsService : AppSettingsService
) { }
ngOnInit(){
this.appSettingsService.getJSON().subscribe(data => {
console.log(data);
});
}
}
https://stackoverflow.com/questions/47206924/