Как я могу сделать это связывание данных в компоненте файла HTML с Angular и Typescript? - PullRequest
Новая
       24

Как я могу сделать это связывание данных в компоненте файла HTML с Angular и Typescript?

0 голосов
/ 23 января 2019

Как я могу увидеть в моем простом файле component.html информацию о переменной: cityInfo?Это файл component.html, это очень простой компонент, но я хочу связать данные с файлом component.ts.Как я могу это сделать? 

<div>
  <p>
    weather works! {{cityInfo}}
  </p>
</div>

И это мой component.ts.С помощью getWeather (city) я делаю http-запрос и возвращаю мне файл JSON. 

export class WeatherComponent implements OnInit {
  public cityVisual: City;

  constructor(
    private weather: WeatherService,
  ) { }

  ngOnInit() {
  }

  weatherCity(city: string) {
    this.weather.getWeather(city).subscribe(resp => {
      this.cityVisual = resp;
      console.log(this.cityVisual.name);

    });
  }
}

Я хочу видеть в своем файле component.html вывод «weather work! NameCity» Как я могу сделатьэтот?Пожалуйста, помогите мне ...

Ответы [ 3 ]

0 голосов
/ 23 января 2019

Вы можете попытаться получить name из cityVisual только тогда, когда оно определено; Вы можете легко сделать это, добавив ? после cityVisual. Вы получили эту ошибку, потому что weatherCity метод асинхронный. и это cityVisual является неопределенным при html init. Попробуйте код под этим текстом. 

<div>
  <p>
    weather works! {{cityVisual?.name}}
  </p>
</div>
0 голосов
/ 23 января 2019

Ваша функция weatherCity() никогда не вызывается. Вот почему на вашей странице ничего не отображается, и ваша консоль возвращает ошибку.

Попробуйте вызвать его внутри вашего ngOnInit блока: 

ngOnInit() {
    this.weatherCity('Washington');
}

Или связать его с кнопкой в ​​HTML: 

<button (click)="this.weatherCity('Washington')">Load Washington</button>

.. и проверьте результаты в консоли браузера.

Если вы получите результат там, вы можете связать его с помощью {{ cityVisual.name }} в любом месте вашего HTML.

Убедитесь, что вы отображаете имя только в том случае, если cityVisual действительно определено, поместив ваш код в оператор *ngIf: 

<p *ngIf="cityVisual">
    Weather works! {{cityVisual.name}}
</p>

SIDENOTE: Не забудьте отписаться от своей WeatherService, если вы закончили извлекать города, или у вас будет утечка памяти.

Рассмотрите возможность сохранения подписки в переменной (например, citySubscription$), чтобы вы могли звонить .unsubscribe() в ngOnDestroy (или в любое другое время, когда вы хотите отменить подписку)

0 голосов
/ 23 января 2019

Вот как бы вы связали название города: 

<div>
  <p>
    weather works! {{cityVisual.name}}
  </p>
</div>
...