如何使用 Angular 和 Typescript 在 HTML 文件组件中执行此数据绑定？

Question

如何在我的简单 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 文件中查看“天气工作！nameCity”输出 我怎样才能做到这一点？ 请帮帮我...

Answer 1

以下是绑定城市名称的方法：

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

Answer 2

你可以尝试获取name的cityVisual，只有当它被定义时； 您可以通过在cityVisual 之后添加? 来轻松实现。 您收到此错误，因为 weatherCity 方法是异步的。它cityVisual 在 html 初始化时是未定义的。试试这个文本下的代码。

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

Answer 3

您的函数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>

旁注：如果您已完成获取城市的操作，请不要忘记取消订阅您的WeatherService，否则您会出现内存泄漏。

考虑将订阅存储在一个变量中（例如citySubscription$），这样您就可以在ngOnDestroy 调用.unsubscribe()（或者在您想终止订阅的任何其他时间）