如何将服务文件中的数据获取到角度 6 中的组件

Posted 2023-02-19

【中文标题】如何将服务文件中的数据获取到角度 6 中的组件

【英文标题】：how to get data in service file to component in angular 6

【发布时间】：2018-12-21 11:12:06

【问题描述】：

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

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: "OK", url: "http://localhost:4200/assets/json/json.txt", ok: false, ...

【问题讨论】：

这不是错误

当我运行应用程序时显示此错误

【参考方案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'
  )
    

【讨论】：

src/app/api.service.ts(11,6) 中的错误：错误 TS7027：检测到无法访问的代码。 src/app/api.service.ts(12,15)：错误 TS2552：找不到名称“响应”。您指的是“响应”吗？ src/app/api.service.ts(13,21)：错误 TS2552：找不到名称“文本”。您指的是“文本”吗？