时间戳

首页 > 解决方案 > 在 httmclient 方法 Angular 中读取 json 文件

angular - 在 httmclient 方法 Angular 中读取 json 文件

问题描述

我有一个小问题，我想在我的 html 页面中显示数据，我在这个服务中使用一个服务 我使用 httpclient 像这样：http.get("./users.json") 但它不起作用，我有一个错误，我该如何解决这个错误，Thnaks fo 答案:)

在此处输入图像描述

用户服务.ts

getUsers() : Observable<User[]> {
    return this.http.get("./users.json").pipe(map(data=>{
        let usersList = data["userList"];
        return usersList.map(function(user:any) {
            return {name: user.userName, age: user.userAge};
        });
    }));
}

用户.component.ts

users: User[] = [];
constructor(private userService: UserService){}
ngOnInit(){
   this.userService.getUsers().subscribe(data => this.users=data);
}

user.component.html

<li *ngFor="let user of users">
   <p>Name: {{user?.name}}</p>
   <p>Age: {{user?.age}}</p>
</li>

标签： angularobservablehttpclient

解决方案

这是关于链接的：将您的文件放在资产文件夹下并尝试以下代码：

return this.http.get<any>('assets/users.json')

推荐阅读