在加载时制作模板显示数据

Question

我试图让我的模板在加载时显示组件中的数据。我已经尝试将 *ngIf 条件设置为本身正在加载的对象。

像这样：

<table>
    <tbody *ngIf="country">
        <tr>
            <td>{{country.name}}</td>
            <td>{{country.population}}</td>
            <td>{{country.area}}</td>
            <td>{{country.language}}</td>
        </tr>
    </tbody>
</table>

但是，页面上没有显示任何内容。 这是我的组件的样子：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BackendService } from 'src/app/backend.service';
import { ICountry } from '../interfaces/country';

@Component({
  selector: 'app-countrydetails',
  templateUrl: './countrydetails.component.html',
  styleUrls: ['./countrydetails.component.css']
})
export class CountrydetailsComponent implements OnInit {

  public country: ICountry;

  constructor(private _backendService: BackendService, private router: Router) { }

  ngOnInit(): void {
    this.getCountry(this.router.url.replace('/',''));
  }

  getCountry(country: string): void {
    this._backendService.getCountry(country).subscribe(data => {
      this.country = data;
      console.log(data);
    });
  }
}

当对象不再未定义时，我应该怎么做才能让模板显示我的数据？

{{国家|json}}

{ "country": { "name": "Russia", "capital": "Moscow", "language": "Russian", "population": "144526636", "density": "8.4", "area": "3969100", "majorCities": [ { "name": "Moscow", "population": "12506468", "area": "2562", "rank": "1" }, { "name": "Saint Petersburg", "population": "5351935", "area": "1439", "rank": "2" }, { "name": "Novosibirsk", "population": "1473754", "area": "503", "rank": "3" } ] } }

Answer 1

您应该在 country 中存储您的 BackendService 的 observable。

public country: Observable<ICountry>;

ngOnInit() {
  this.country = this.getCountry(...);
}

getCountry(country: String): Observable<ICountry> {
  return this._backendService.getCountry(country);
}

然后，在您的 HTML 组件中

<tbody *ngIf="country | async as country">
    <tr>
        <td>{{country.name}}</td>
        <td>{{country.population}}</td>
        <td>{{country.area}}</td>
        <td>{{country.language}}</td>
    </tr>
</tbody>