Я не могу показать результат моего сервиса в компоненте html

Question

<code>/* I am developing an example application with asp net core Web Api and angular 7. This should consume a service, but when I try to show it in the component it shows me that the object is undefined.*/

//Shortn.ts

enter code here
export interface Shortn {

  Url: string;
}
//HomeComponent.ts
MyMethod() {

    var url = (<HTMLInputElement>document.getElementById("MyObjectInput")).value;
    alert("desde componente: " + url);
    this.shortenerService.shortenUrl2(url).toPromise()
      .then(res => this.shortener = res as Shortn);

  }
//ShortenService .ts

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Shortn } from '../models/shortn';

//ShortenService 
@Injectable()
export class ShortenService {
  private apiURL = this.baseUrl + "api/My/Generate";
  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) { }
  shortenUrl(url: string): Observable<string> {
    alert("desde servicio: " + url);
    let shortener = { Url: url };
    //shortener.Url = url;
    return this.http.post<string>(this.apiURL, shortener);
  }
  shortenUrl2(url: string): Observable<Shortn> {
    alert("desde servicio: " + url);
    let shortener = { Url: url };
    //shortener.Url = url;
    return this.http.post<Shortn>(this.apiURL, shortener);
  }
  shortenUrl3(url: string): Observable<Shortn> {
    let shortener = { Url: url };
    return this.http.post<Shortn>(this.apiURL, shortener);
  }

}
//home.component.html
<pre>
  {{shortener.Url}}

При нажатии кнопки приложение корректно перемещается в службу (с почтальоном я могу сделать это правильно), но желание показать его в home.component.html говорит мне, что средство сокращения не определено.Попробуйте разные способы, но всегда с одним и тем же результатом. Версии элементов: Angular CLI: 7.2.3 Узел: 11.6.0 ОС: win32 x64 asp net core 2.2

Не могли бы вы мне помочь?Заранее большое спасибо

Answer 1

Проверьте перечисленные ниже проблемы в своем коде:

1. Js чувствителен к регистру, вы должны определить url: string;, поскольку json, возвращаемый из веб-API, равен {"url":"api/My/Generate"}

   export interface Shortn {
       url: string;
   }
   

2. Вам необходимо изменить shortener не определено или инициализировать его, так как вы не можете установить его перед использованием.

Опция1:

    {{shortener ? shortener.url : "" }}

Опция2:

private shortener: Shortn = { url:""};