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

Question

您好，我是 Angular 的新手，我正在 Angular 5 中制作一个应用程序来显示带有与图像相关的信息的图像，该应用程序有一个缩略图页面，当您单击时，您可以看到带有描述或视频的图像，我从服务和服务内的数组中获取所有数据，但我需要更改，而不是从数组中获取数据，我需要从 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 实现相同的功能？谢谢。

Answer 1

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

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

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

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

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

Answer 2

从 json 文件中获取数据是异步的，因此它与从数组中获取数据有点不同，您需要考虑这一点。

您的服务将如下所示：

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: string): Observable<TutoGaleria> {
      return this.getImages()
         .map(images => images.filter(image => image.id === id))
         .filter(images => images.length)
         .map(images => images[0])
   }
}

还有你的组件：

export class TutorialPostsComponent implements OnInit {
    image:any
    visibleImages: any[] = [];

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

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

}

希望有帮助