当可观察对象提供项时，如何在视图中访问项的属性

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>

从某种意义上说，这很有效，我没有收到任何错误，页面显示[对象对象]。

因此，当可观察量发送响应时，它会通过并且一切都会自行解决。

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

我的猜测是，视图正在尝试在可观察量设置数据之前解决 city.name。

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

谢谢

Answer 1

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

{{ myObservable | async}}