无法使用Angular服务从Angular应用程序中的JSON文件访问数据

问题描述

这是我的JSON文件。

{mood: [ {

    "id":"1","text": "Annoyed","cols": 1,"rows": 2,"color": "lightgreen","route":"/angry","musics": [
      {
          "id": "0","name": "English- Heaven's Peace","image": "images/music.png","link": "https://www.youtube.com/playlist?list=PLPfXrbtn3EgleopO8DiEdsNKgqYZZSEKF","descpription": "Tunes that soothe your pained soul","reviews": [
              {                   
                   "name": "abc","rating": 4,"review": "energetic","date": ""
              }
          ]
      },{
           "id": "1","name": "English- Hell's Fire","link": "https://www.youtube.com/playlist?list=PLPfXrbtn3EgmZitRQf1X1iYwWW_nUF44L","descpription": "Beats that match the ones of your heart","reviews": [
               {                   
                    "name": "abc","rating": 3.5,"date": ""
               }
           ]
      },{
           "id": "2","name": "hindi","link": "","descpription": "","date": ""
               }            
           ]     
      },{
           "id": "3","name": "Punjabi","link": "https://www.youtube.com/playlist?list=PLPfXrbtn3Egnntch2thUO55YqPQgo4Qh7",{
           "id": "4","name": "Mix and Match","link": "https://www.youtube.com/playlist?list=PLPfXrbtn3EglN5LVTETqH3ipRLfXmY6MB","rating": 5,"date": ""
               }            
           ]     
      }
   ]
}  ]
}`

我已经在文件名mood.services.ts中创建了角度服务

import { Injectable } from '@angular/core';
import { Mood } from '../shared/mood';
import { Observable,of } from 'rxjs';
import { delay } from 'rxjs/operators';
import { map,catchError } from 'rxjs/operators';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg.service';
@Injectable({
providedIn: 'root'
})
export class MoodService {

constructor(private http: HttpClient,private processHTTPMsgService: ProcessHTTPMsgService) { }

getMoods(): Observable<Mood[]> {
  return this.http.get<Mood[]>(baseURL + 'moods')
  .pipe(catchError(this.processHTTPMsgService.handleError));
}

getMood(id: number): Observable<Mood> {
  return this.http.get<Mood>(baseURL+'moods/'+id)
  .pipe(catchError(this.processHTTPMsgService.handleError));
}

getMoodIds(): Observable<number[] | any> {
  return this.getMoods().pipe(map(moods => moods.map(mood => mood.id)))
  .pipe(catchError(error => error));
}

getMusicIds(): Observable<number[] | any> {
  return this.getMoods().pipe(map(musics => musics.map(music => music.id)))
}
}

这是我的musicdetail.component.ts文件，它将获取所选择的特定音乐的数据。

import { Component,OnInit,Inject } from '@angular/core';
import { Mood } from '../shared/mood';
import { Music } from '../shared/music';
import { Review } from '../shared/review';
import { MoodService } from '../services/mood.service';
import { Params,ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { switchMap } from 'rxjs/operators';

@Component({
selector: 'app-musicdetail',templateUrl: './musicdetail.component.html',styleUrls: ['./musicdetail.component.scss']
})
export class MusicdetailComponent implements OnInit {

mood : Mood;
music: Music;
musicIds: string;
errMess: string;
prev : string;
next : string;
review: Review;

constructor(private moodservice: MoodService,private route: ActivatedRoute,private location: Location,@Inject('BaseURL') private BaseURL) { }

ngOnInit(): void {
this.route.params.pipe(switchMap((params: Params) => {return this.moodservice.getMood(params['id']); 
}))
.subscribe(mood => {this.mood = mood;},errmess => this.errMess = <any>errmess);
}

}

在列表的列表上使用'[routerLink] =“ ['/ musicdetails'，mood.id，music.id]”`在music.component.ts中单击时，我同时传递了mood.id和music.id音乐，但我无法做出逻辑来提取特定音乐以显示其所有详细信息。我可以使用getMood（id）服务获取心情ID，但无法在该心情内对音乐进行同样的操作。

解决方法

你是这个意思吗？

getMusic(moodId: number,musicId: number): Observable<Music> {
  return this.getMood(moodId).pipe(
    map(mood => mood.musics.find(music => music.id == musicId)),// please note: not === since id is a string in your json,but a number param
  );
}