Question

您好我是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。

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

this.visibleImages = this.articulosService.getImages();行现在的工作方式与您预期的不同，因为您无法获得您需要的对象，但可观察引用会为您提供结果在将来。

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

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);     
    }

}

希望有所帮助

从json而不是Array Angular 5

2 个答案: