从网址获取ID时出错

时间:2018-07-17 08:32:51

标签: angular routes

我正在尝试从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中遇到的错误

0 个答案:

没有答案