typescript - incorrect display in the browser in an Angular application

Question

i am quite a beginner in angular. I hope someone can help me. I call a REST interface in the Angularframework with the following code.

  public getAntwort(){
    return this.http.get<Mail>('http://......')
    .pipe(retry(3),catchError(this.handleError));
  }

In the calling component, I save this in a field that is defined with any.

export class SemailUiComponent implements OnInit {  
  mail: any;
  constructor(private semailDataService: SemailService) {
  }
  ngOnInit(): void {
    this.mail = this.semailDataService.getAntwort();
  }
}

If I output the this.mail field, I don't get a string but an object. The remainder of the interface delivers a string. The second problem is that I want to print the string. How do I do this in HTML ' Thank you for the answers

question from:https://stackoverflow.com/questions/65896328/incorrect-display-in-the-browser-in-an-angular-application

Answer 1

this.http.method returns an Observable. You need to subscribe to it in order to get the data and in order to actually do the http request.

Your code is just missing this part:

export class SemailUiComponent implements OnInit {  
  mail: any;
  constructor(private semailDataService: SemailService) {
  }
  ngOnInit(): void {
    this.semailDataService.getAntwort().subscribe(res => {
      this.mail = res;
    });
  }
}

Tip: If you try to open the developer console before editing your code, you will see that there is no request being made by the url: 'http://......'.