Question

如何从响应中获取数据并将其提供给组件？以下是相关文件。

api.service文件

import { Injectable } from '@angular/core';
import { HttpClient } from'@angular/common/http'; 
import { Observable } from 'rxjs/Observable';

@Injectable({  providedIn: 'root'})
export class apiService {  constructor(private http: HttpClient) {

  this.getJSON().subscribe(data => {
     console.log(data)
   });
  }
  public getJSON(): Observable<any> { 
    return this.http.get("../assets/json/json.txt")
  }
}

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from'@angular/common/http'; 
import { apiService } from  './api.service';
@Component({  
selector: 'app-root', 
templateUrl:'./app.component.html',  
styleUrls: ['./app.component.css']})

export class AppComponent {  
title: any;  constructor(private apiService: apiService) { } ngOnInit(data) {
    this.apiService.getJSON().subscribe(data => {
      this.title = data.menu_data.copyright;
      });  }

app.module.ts

     import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClient} from  '@angular/common/http';
import { apiService } from  './api.service';
import { FormsModule }   from '@angular/forms';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { WorkComponent } from './work/work.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { ContactComponent } from './contact/contact.component';
import { BlogComponent } from './blog/blog.component';import { HomeComponent } from './home/home.component';
import { ErrorComponent } from './error/error.component';
import { IndexComponent } from './index/index.component';
import { HttpClientModule } from '@angular/common/http';

const routes: Routes = [ 
//{ path: 'home', component: HomeComponent}, 
 { path: '',component: IndexComponent } 
 { path: 'index',component: IndexComponent },  
  { path: 'about',component: AboutComponent },
  { path: 'work',component: WorkComponent } 
{ path: 'portfolio',component: PortfolioComponent },
  { path: 'contact',component: ContactComponent },
  { path: 'blog',component: BlogComponent }, 
//{ path: '',   redirectTo: '', pathMatch: 'full'}, 
{ path: '**', component: ErrorComponent }];
@NgModule(
{ declarations: [
        AppComponent,
        AboutComponent,
        WorkComponent,
        PortfolioComponent,
        ContactComponent,
        BlogComponent,
        HomeComponent,
        ErrorComponent,
        IndexComponent
         ],
 imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot(routes)
        ],
providers: [apiService],
  bootstrap: [AppComponent]})
export class AppModule { }

我收到以下错误消息。

HttpErrorResponse {headers：HttpHeaders，status：200，statusText： “确定”，网址：“ http://localhost:4200/assets/json/json.txt”，确定：假，…}

Answer 1

您需要将responseType更改为text，因为在get方法中默认值是json

import { Injectable } from '@angular/core';
import { HttpClient } from'@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable({  providedIn: 'root'})
export class apiService { 
    constructor(private http: HttpClient) {
      this.getJSON().subscribe(data => {
        console.log(data)
     });}
  public getJSON(): Observable<any> { return 
     this.http.get("../assets/json/json.txt",{
      observe:'response',
       responseType:'text'
  })
    }

}

如何获取服务文件中的数据到angular 6中的组件

1 个答案: