-1

i will combine an angular app with a php backend - but somehow my variable "intrologos" is shown as 'wrong' ... the "intrologos" befor the ":" ... additionally thr "res['data']" is shown as false ...

export class IntroLogosService {
  baseUrl = 'http://localhost/backend';
  intrologos: IntroLogos[];

  constructor(private http: HttpClient) { }
  getAll(): Observable<IntroLogos[]> {
    return this.http.get(`${this.baseUrl}/listintrologos`).pipe(
      map((res) => {
        this.intrologos = res['data'];
        return this.intrologos;
    }));
  }
}

the IntroLogos class is imported ... someone an idea? Thanks!

Manuel Weitzel
  • 101
  • 1
  • 1
  • 13
  • How is it shown as "wrong"? Lint issue, because you don't cast response as any type? – Bojan Kogoj Dec 17 '20 at 13:08
  • 'The property "intrologos" has no initializer and is not definitely assigned in the constructor' is the first error ... the second is "the name res was not found". – Manuel Weitzel Dec 17 '20 at 13:20
  • I think that it might be a problem with tsconfig - could you check this answer: https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc ? – Pawel Kiszka Dec 17 '20 at 13:25
  • "intrologos: IntroLogos[] = [];" is the solution for the first error. the second error (on "res['data']") is still there – Manuel Weitzel Dec 17 '20 at 14:08
  • at compiling the second error is shown as: "error TS7053: Element implicitly has an 'any' type because expression of type '"data"' can't be used to index type 'Object'." – Manuel Weitzel Dec 17 '20 at 14:11

1 Answers1

0

If you want to have statefull service (it will work as a cache), then you should just add subscribe at the very end:

export class IntroLogosService {
  baseUrl = 'http://localhost/backend';
  intrologos: IntroLogos[];

  constructor(private http: HttpClient) { }

  fetchAndSaveInTheServiceAsCach(): void {
    return this.http.get(`${this.baseUrl}/listintrologos`).pipe(
      map((res) => res.data)
    ).subscribe( 
      intrologos -> this.intrologos = intrologos;
    }));
  }
}

On the other hand, if you the service to not be a cache and just return the value of intrologos, look at this:

export class IntroLogosService {
  baseUrl = 'http://localhost/backend';

  constructor(private http: HttpClient) { }

  getAll(): Observable<IntroLogos[]> {
    return this.http.get(`${this.baseUrl}/listintrologos`).pipe(
      map((res) => res.data)
    );
  }
}

And then you can subscribe (or even better - use the async pipe) in any other service/component.

Pawel Kiszka
  • 812
  • 7
  • 11
  • thank you for your answer. but your answer does not contain an answer to my question why the "intrologos: IntroLogos[];" gives me an error message on the "intrologos" variable before the ":" - and don't matter which of your solutions i try both are not working because they give errors. Whats wrong? Something missing in my project? – Manuel Weitzel Dec 17 '20 at 13:19
  • Can you share what is the json output if you'll try to call the endpoint manually (eg using Postman)? – Pawel Kiszka Dec 17 '20 at 13:22
  • the output is: {"0":{"Name":"Einr1","Ort":"OrtEinr1","Logo":"LogoEinr1.jpg"},"1":{"Name":"Einr2","Ort":"OrtEinr2","Logo":"LogoEinr2.jpg"}} – Manuel Weitzel Dec 17 '20 at 13:59
  • i changed something and now the output is: {"data":[{"Name":"Einr1","Ort":"OrtEinr1","Logo":"LogoEinr1.jpg"},{"Name":"Einr2","Ort":"OrtEinr2","Logo":"LogoEinr2.jpg"}]} i don't understand the error on "res['data']" which tells: "error TS7053: Element implicitly has an 'any' type because expression of type '"data"' can't be used to index type 'Object'. Property 'data' does not exist on type 'Object'." – Manuel Weitzel Dec 17 '20 at 18:48