typescript - Httpclient angular handledning

Jag har följt guiden på Angulars webbplats (https://angular.io/guide/http) men jag kan inte uppnå det jag vill eftersom jag får ett fel som jag inte förstår. Jag har lagt min textfil i assets-mappen och skapat en config.json-fil där jag skrev in koden från guiden. Jag får fel i både min service.ts-fil och component.ts-fil. Snälla hjälp mig att förstå mina fel och guiden.

Component.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {HttpClient, HttpErrorResponse, HttpResponse} from '@angular/common/http';
import {GeneralService} from '../general.service';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.css']
})
 export interface General {
  generalUrl: string;
  textfile: string;
}
 export class GeneralComponent implements OnInit {
  title = 'Introduction';
  generalUrl = 'assets/project_description.txt';
  general: General;
  generalService: GeneralService;

 constructor(private http: HttpClient) { }

 ngOnInit() {
}

 getGeneral() {
  return this.http.get(this.generalUrl);
}

 showGeneral() {
  this.generalService.getGeneral()
   .subscribe(data => this.general = {
     generalUrl: data['generalUrl'],
     textfile: data['textfile']
   });
}

showGeneralResponse() {
 this.generalService.getGeneralResponse()
  .subscribe(resp => {
    const keys = resp.headers.keys();
    this.headers = keys.map(key =>
    `${key}: ${resp.headers.get(key)}`);
  this.config = {
  });
 }
}

I min showGeneralResponse()-funktion är headers och config odefinierade variabler

Service.ts

import { Injectable } from '@angular/core';
import {General} from './general/general.component';
import {HttpResponse} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class GeneralService {

  constructor() { }
  getGeneral() {
    return this.http.get<General>(this.generalUrl);
  }
  getGeneralResponse(): Observable<HttpResponse<General>> {
    return this.http.get<General>(
      this.generalUrl, { observe: 'response'}
    );
  }
}

I funktionerna getGeneral() och getGeneralresponse() har jag http och generalUrl som är odefinierade variabler

Men i min config.json-fil har jag inget fel

config.json

 "generalUrl": "api/general",
 "textfile": "assets/project_description.txt"

Jag skulle också vilja veta vilken funktion jag ska lägga i min HTML-fil så att min applikation visar mig min filtext

Svar #1

Lucie, jag har bråttom, (jag antar att problemet är att Angular inte kan hitta filen data.json). Jag satte in det enklaste exemplet jag vet:

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [DataService,],
  bootstrap: [AppComponent]
})
export class AppModule { }

//DataService.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class DataService {
    constructor(private http: HttpClient) { }
    getData() {
        return this.http.get('../assets/data.json')
    }
}
//app.compontent.ts
import { Component, OnInit } from '@angular/core';
import {DataService} from './data.service'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data:any;
  constructor(private dataService:DataService){}
  ngOnInit(){
    this.dataService.getDataDos(null).subscribe(res=>{
        this.data=res;
    })
  }
  }
}

//app.component.html
{{data |json}}

//data.json (in folder assets/)
[
    {"key":"uno"},
    {"key":"dos"},
    {"key":"tres"},
    {"key":"cuatro"},
    {"key":"cinco"}
]

Svar #2

@Lucie Shaffner 1.- json-filen måste vara en json, se "{" och "

{
    generalUrl: "api/general",
    textfile: "assets/project_description.txt"
}

2.-Du har definierat variabeln "generalUrl" i din komponent, men inte i tjänsten.

3.-Om du vill använda en tjänst i en komponent måste du injicera den i konstruktorn

//In your component

//remove the line below
//generalService: GeneralService;

//And change the cosntructor
constructor(private http: HttpClient,private generalService:GeneralService) { }

4.-Du måste kalla på funktionen this.showGeneral() i din ngOnInit() annars händer det aldrig

5.- Deklarera exportgränssnittet före komponenten

import { Component, OnInit } from '@angular/core';
...
//Move export inferface here
 export interface General {
  generalUrl: string;
  textfile: string;
}

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