时间戳

首页 > 解决方案 > 从 json 而不是 Array Angular 5 中获取数据

arrays - 从 json 而不是 Array Angular 5 中获取数据

问题描述

您好，我是 Angular 的新手，我正在 Angular 5 中制作一个应用程序来显示带有与图像相关的信息的图像，该应用程序有一个缩略图页面，当您单击时，您可以看到带有描述或视频的图像，我m 从服务和服务内部的数组中获取所有数据，但我需要更改，而不是从数组中获取数据，我需要从 json 中获取数据，但保留我已经拥有的所有功能。但是当我从 json 中获取数据时，我点击时看不到图像的信息。

这是我需要为 json 更改的数组的服务

export class ArticulosService {
enter code here @Injectable()
export class ArticulosService {

constructor(private http: HttpClient) {}

visibleImages = [];
private url: string = '../assets/data/articulos.json';

getImages() {
  return this.visibleImages = IMAGES.slice(0);
}

getImage(id: number) {
  return IMAGES.slice(0).find(image => image.id === id);
}

}
const IMAGES = [
{..this is the array..} ];

这是带有图像缩略图的组件，您可以在此处查看 IMAGES 数组中的所有缩略图

export class HomeComponent implements OnChanges {
images: any[];
visibleImages: any[] = [];

constructor(private articulosService: ArticulosService) {
 this.visibleImages = this.articulosService.getImages();
}

ngOnChanges() {
 this.visibleImages = this.articulosService.getImages();
}

}

这是您看到图像标题等的图像页面组件。

export class TutorialPostsComponent implements OnInit {
image:any

visibleImages: any[] = [];
constructor(private articulosService: ArticulosService, private route: 
ActivatedRoute) {
  this.visibleImages = this.articulosService.getImages();
}

ngOnInit() {
  this.image = this.articulosService.getImage(
  +this.route.snapshot.params['id']
);
}
}

在这里，我将服务从 JSON 而不是硬编码的数组更改为 fethc

   export class ArticulosService {
   private _url: string = '../assets/data/articulos.json';

  constructor(private _http: HttpClient) {}

  getImages(): Observable<TutoGaleria[]> {
    return this._http.get<TutoGaleria[]>(this._url)
  }
  }

我可以在缩略图中看到数据，但是当我使用数组时，这些数据没有传递给图像细节。

我认为与 getImage(id: number) 函数有关我不知道如何从 json 获取这部分

如何使用 json 执行相同的功能？谢谢你。

标签： arraysjsonangularapifetch

解决方案

问题是，您返回的是一个数组，但您现在返回的是一个Observable。

这是一种不同类型的数据，也是一个完整的编程范式：您现在不是传递对象，而是传递需要处理的“事件”。

该 this.visibleImages = this.articulosService.getImages();行现在的工作方式与您预期的不同，因为您不会获得所需的对象，而是Observable引用，它将在未来为您提供结果。

要理解这一点，我真的建议您阅读链接教程。您的解决方案将是这样的：

const getImagesSubscription = this.articulosService.getImages().subscribe(
  (response) =>  {this.visibleImages = response;},
  (error) => { << handle errors here >> },
  () => { << complete event here >> });

推荐阅读