如何通过observable提供项目时,如何访问视图中项目的属性?

时间:2017-10-27 14:51:21

标签: angular typescript ionic2 observable

我有以下提供商代码:

  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.name}}替换{{city}}时。 我得到了 找不到'undefined'的属性名称。

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

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

由于

1 个答案:

答案 0 :(得分:0)

您可以访问视图中的可观察值,而无需使用异步管道进行订阅:

isPrime(2,10);

function isPrime(lowbound, highbound) {
  var primes = [];
  for (var i = lowbound; i < highbound; i++) {
    primes[i] = true;
  }
  console.log(primes);
  var limit = Math.sqrt(highbound);
  for (var i = lowbound; i < limit; i++) {
    if (primes[i]) {
      for (var j = i * i; j < highbound; j += i) {
        primes[j] = false;
      }
      for (var i = lowbound; i < highbound; i++) {
        console.log(i + " " + primes[i]);
      }
    }
  }

  //end of isPrime
}