我正在尝试从URL(https://anapioficeandfire.com/api/characters/1)获取/ id属性。我经历了其他答案,并尝试this来解决我的问题,但不知为何我错过了一些东西。任何帮助,将不胜感激。谢谢。
这是我的文件:
character-http.service.ts
import { Injectable } from '@angular/core';
//importing Http Client to make the request
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
//importing observables related code
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';
import { tap } from 'rxjs/operators';
@Injectable()
export class CharacterHttpService {
public allCharacters;
public currentCharacter;
public baseUrl = 'https://anapioficeandfire.com/api';
constructor(private _http: HttpClient) {
console.log("Character Http service was called");
}
// method to return all Characters
public getAllCharacters():any {
let myResponse = this._http.get(this.baseUrl+'/characters');
console.log(myResponse);
return myResponse;
}
// method to return single Character Informations
public getSingleCharacterInfo(currentCharacterId): any {
let myResponse = this._http.get(this.baseUrl + '/characters/', currentCharacterId);
console.log(myResponse);
return myResponse;
} // end get Charecter info function
}
character-view.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { switchMap } from 'rxjs/operators'
// importing route related code
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { CharacterService } from '../character.service';
import { CharacterHttpService } from '../character-http.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-character-view',
templateUrl: './character-view.component.html',
styleUrls: ['./character-view.component.css']
})
export class CharacterViewComponent implements OnInit, OnDestroy {
public currentCharacter;
constructor(private _route: ActivatedRoute, private router: Router, private characterService: CharacterService, private characterHttpService: CharacterHttpService) {
console.log("Character-view Constructor called");
}
ngOnInit() {
let myCharacterId = this._route.paramMap.subscribe(params => {
console.log(params);
console.log(params.get('id'));
}); ;
// getting the details of the character from the route
this.characterHttpService.getSingleCharacterInfo(myCharacterId).subscribe(
data => {
console.log(data);
this.currentCharacter = data;
},
error => {
console.log("some error occured");
console.log(error.errorMessage);
});
}
ngOnDestroy(): void {
console.log("Character View Component Destroyed");
}
}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//Router Module for Application level Route
import { RouterModule, Routes } from '@angular/router';
//importing components
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { BookViewComponent } from './book-view/book-view.component';
import { CharacterViewComponent } from './character-view/character-view.component';
import { NotfoundComponent } from './notfound/notfound.component';
//import statement for service
import { BookService } from './book.service';
import { BookHttpService } from './book-http.service';
import { CharacterService } from './character.service';
import { CharacterHttpService } from './character-http.service';
import { HttpClientModule } from '@angular/common/http';
//decorators
@NgModule({
declarations: [
AppComponent,
HomeComponent,
BookViewComponent,
// NotfoundComponent,
CharacterViewComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'books/:name', component: BookViewComponent },
{ path: 'characters/:id', component: CharacterViewComponent},
// { path: '**', component: NotfoundComponent }
]),
HttpClientModule
],
providers: [BookService, BookHttpService, CharacterService, CharacterHttpService],
bootstrap: [AppComponent]
})
export class AppModule { }
这是我在console中遇到的错误