当可观察项提供项目时，如何访问视图中项目的属性？

Question

我有以下提供者代码：

  getWorldCities2() {
    return this.http.get('../assets/city.list.json')
      .map(res => res.json());
  }

页面打字稿代码：

  ionViewDidLoad() {
    this.getWorldCities();
  }

  getWorldCities(){
    this.AppCitiesProvider.getWorldCities2()
    .subscribe(
        (cities) => {
            this.worldCities = cities;
            this.firstCity = cities[0].name;
            console.log(this.worldCities);
            this.generateGrid();
        },
        (error: any) => this.errorMessage = <any>error);
    ;
  }
  generateGrid(){
    let plusCity = new City();
    this.favoriteCities.push(plusCity);
    for (let i = 0; i < this.favoriteCities.length; i+=2) { //iterate images
      this.grid[rowNum] = Array(2); //declare two elements per row
      if (this.favoriteCities[i]) { //check file URI exists
        this.grid[rowNum][0] = {name:this.favoriteCities[i].name , id:this.favoriteCities[i].id,
      country:this.favoriteCities[i].country, coord:this.favoriteCities[i].coord
    };
        console.log(this.grid[rowNum][0]);
      }
      if (this.favoriteCities[i+1]) { //repeat for the second image
         this.grid[rowNum][1] = this.favoriteCities[i+1]
      }
      rowNum++; //go on to the next row
     }
  }

而我的 html 页面有：

<ion-grid>
  <ion-row *ngFor="let row of grid">
    <ion-col width-50 *ngFor="let city of row">
    {{city}}
    </ion-col>
  </ion-row>
</ion-grid>

从我没有收到任何错误的意义上说，这很好用，页面显示 [object Object]。

因此，当 observable 发送响应时，一切都会自行解决。

问题是当我将 {{city}} 替换为 {{city.name}} 时。 我得到一个 找不到“未定义”的属性名称。

我的猜测是视图在 observable 设置数据之前尝试解析 city.name。

告诉视图“等待”的正确方法应该是什么？

谢谢

Answer 1

您可以通过使用异步管道访问视图中的可观察值，而无需订阅它：

{{ myObservable | async}}