Question

我有一个照片库应用程序，当我从jsonplaceholder.typicode.com提取数据时工作正常。但是当我使用我自己的本地数据时，当我点击照片进入详细视图时它会中断。如果我点击一个进入详细视图，如何显示照片但是给我一个404错误？这是我的代码：

export class DataService {

     private _url: string = '/assets/data/img.json';

  constructor(private http: HttpClient) { }
getUsers(){
    return this.http.get(this._url);
}
getUser(id){
    const url = `${this._url}/${id}`;
    return this.http.get(url);
}


}

详细视图路径

{
    path: 'details/:id',
    component: DetailsComponent
  },

我的json数据片段：

{
  "id": 1,
  "category": "offense",
  "caption": "No chance!",
  "imageUrl": "https://placeimg.com/200/200/arch"
},

详细信息组件：

export class DetailsComponent implements OnInit {

    singleItem$: Object;

  constructor(private data: DataService, private route: ActivatedRoute) {

      this.route.params.subscribe(params => this.singleItem$ = params.id)
   }

  ngOnInit() {

      this.data.getUser(this.singleItem$).subscribe(data => this.singleItem$ = data)
  }

}

angular.json

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],

我唯一改变的是_url字符串：https://jsonplaceholder.typicode.com/photos并且应用程序按预期工作。

Answer 1

您的getUser（）函数会将项目索引添加到URL。

getUser(id){
    const url = `${this._url}/${id}`;
    return this.http.get(url);
}

因此，如果您正在获取Id 1的数据，请求网址将为＆＃39; /assets/data/img.json/1'，而无法加载。< / p>

对于测试，您可以从本地json文件加载整个数据，并在订阅时选择所需的照片。

// Data Service
getUser(id){
    //const url = `${this._url}/${id}`; /* Get the URL to json */
    return this.http.get(url);
}

// DetailsComponent 
ngOnInit() {
  this.data.getUser(this.singleItem$).subscribe(data => this.singleItem$ = data.find(x => x.id === this.singleItem$))
}

无法使用.json文件显示详细信息视图

1 个答案: