Question

我是离子/角度的新手。我在WordPress中为自定义主题分类创建了一个rest API。我创建了一个名为ads的提供商

  retrieveAds() { 
    return this.http.get(this.api_url)
      .map(res => res.json());
  }
  retrieveThumbInAds(adId: number) {
    return this.http.get(this.thumb_url + adId )
      .map(res => res.json());
  }

然后在我的home.ts

中

 ionViewDidLoad() {
    this.adsProvider.retrieveAds().subscribe(results => {
      this.ads = results;


    });

     this.adsProvider.retrieveThumbInAds(this.ads).subscribe(results => {   ---> this is wrong, how to correct it?
      this.thumbs = results;
    }); 
  }

然后在我的home.html

中

<ion-card [@fadeIn]="fade" class="category-card" *ngFor="let item of ads">
    <img src="{{item.shop_thumbnail}}" /> ----> this is wrong
    <ion-icon name="md-heart" (click)="activeLike(item)" [ngClass]="{'activeColor':item.like}" class="like-icon" color="light"></ion-icon>
    <div class="card-title" (click)="goDetailPage(item.detail)" text-uppercase>
      <h4 color="secondary">{{item.title.rendered}}</h4>
      <p color="dark">{{item.price}}</p>
      <p  class="excerpt" [innerHtml]="item.excerpt.rendered">  </p>
    </div>

</ion-card>

我的代码中有两个问题，第一个是我不知道如何将id传递给第二个方法，第二个问题是如何迭代模板中的缩略图，因为它们是不同的数组？我应该将两个数组合并为一个吗？

retreiveAds应该返回一个这样的数组

http://demo.wp-api.org/wp-json/wp/v2/posts

那个用于帖子，我的用于广告，我在Wordpress中创建的自定义帖子类型。

retrieveThumbInAd如果我设法成功获得id

http://demo.wp-api.org/wp-json/wp/v2/media?per_page=1&order=asc&parent=15

其中15是我从retreiveAds得到的id。然后我必须遍历主页上的缩略图和广告详细信息

Answer 1

Mate，您正在使用 async programming ，您无法暂停代码的执行或让它等待，您的订阅将来会得到解决，但您无法预测何时。

并行执行

retrieveAds()和retrieveThumbInAds(this.ads)这不应该是这种情况，因为后者依赖于前一个仍然在后台执行的值，你需要做的就是调用订阅解决后。

关于您需要转换为数组的json响应。使用Object.keys()

 public response=[];
         ionViewDidLoad() {
            this.adsProvider.retrieveAds().subscribe(results => {
             this.response=[];
      Object.keys(results).map((key)=>{ this.response.push(results[key]) });
             //let id=this.response[0].id//use index to extract desired id
            this.getData(id);

            });
        }
        getData(id)
        {
          this.adsProvider.retrieveThumbInAds(id).subscribe(results => {
              this.thumbs = results;
            });
        }

模板

<ion-card [@fadeIn]="fade" class="category-card" *ngFor="let item of response">
    <img src="{{item?.shop_thumbnail}}" />

Ionic：如何在模块中使用多个方法以及如何在模板中显示结果？

1 个答案: