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

imzjd6km 于 2023-08-08 发布在 Angular

关注(0)|答案(2)|浏览(149)

我是新的在Angular ，我正在做一个应用程序在Angular 5显示图像与信息相对的图像，该应用程序有一个缩略图页面，当你点击你可以看到图像的描述或视频，我的我正在从服务和服务内的数组中获取所有数据，但我需要更改，我需要从JSON中获取数据，但要保留所有的功能我已经有了，但是当我从JSOM中获取数据时，我只是在单击时看不到图像的信息。
这是我需要为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而不是硬编码数组中获取

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实现同样的功能？

JSON

来源：https://stackoverflow.com/questions/50154624/fetch-data-from-a-json-instead-of-an-array-angular-5

2条答案

按热度按时间

niwlg2el1#

问题是，您返回的是一个数组，但现在返回的是Observable。
这是一种不同类型的数据，也是一个完整的编程范式：你现在不是传递对象，而是传递需要处理的“事件”。
this.visibleImages = this.articulosService.getImages();行现在的工作方式与你预期的不同，因为你不会得到你需要的对象，而是Observable引用，它将在未来 * 给予你结果。
要理解这一点，我真的建议你阅读链接教程。您的解决方案将是这样的：

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

字符串

赞(0）回复(0）举报 2023-08-08

j91ykkif2#

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

}

型
希望能帮上忙

赞(0）回复(0）举报 2023-08-08

我来回答

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

2条答案

相关问题

热门标签

最新问答