1

我所做的是创建云功能而不是这样做：

if (organizeby === "Most rating") {
    this.restaurantsRef = this.afDb.list('/restaurants', ref => ref.orderByChild('rating'));
    this.restaurantsList = this.restaurantsRef.valueChanges();
}

哪个有效，但我创建了一个云功能，现在我想做的是：

if (organizeby === "Most rating") {
     this.http.get('https://us-central1-onthespot-bfc6f.cloudfunctions.net/getSortedRestaurantsList')
       .subscribe((data) => {
            console.log('data', data.json());
            this.restaurantsList = data.json();
       })
    }

console.log 向我显示了正确的列表，但没有呈现响应我在这里做错了什么？

这是模板：

<ion-card *ngFor="let restaurant of restaurantsList | async | termSearch:proptype:'tags'" margin-bottom>
        <div class="card-img-wrap">
            <ion-fab bottom right edge>
                <button ion-fab mini (click)="favorite(restaurant)">
                    <ion-icon name="heart"></ion-icon>
                </button>
            </ion-fab>
            <img src="{{restaurant.thumbnail}}" tappable (click)="openRestaurantDetail(restaurant)">
            <span ion-text class="card-img-price fw700 text-black">
                {{ restaurant.tags }}
            </span>
            <span ion-text class="card-img-status fw500 text-white" [ngClass]="{'closed': restaurant.label === 'closed', 'open': restaurant.label === 'open'}">
                {{ restaurant.label }}
            </span>
        </div>
        <ion-card-content>
            <ion-card-title ion-text color="dark" class="fw700" tappable (click)="openRestaurantDetail(restaurant)" no-margin no-padding>
                {{restaurant.title}}
            </ion-card-title>
            <p ion-text color="primary" no-margin>
                {{restaurant.city}}, {{restaurant.state}} •
                <span ion-text class="fw700">{{ restaurant.price }}</span>
            </p>
            <hr>
            <ion-badge color="secondary">
                <ion-icon name="star"></ion-icon>
                {{ restaurant.rating | number:'1.1' }}
            </ion-badge>
        </ion-card-content>
    </ion-card>
4

2 回答 2

1

当您使用async pipe

<ion-card *ngFor="let restaurant of restaurantsList | async | termSearch:proptype:'tags'" margin-bottom>

您不再需要明确订阅：

this.http.get('https://us-central1-onthespot-bfc6f.cloudfunctions.net/getSortedRestaurantsList')

只需保留该Angular async pipe控制订阅（导入map operator）。

if (organizeby === "Most rating") {
  this.restaurantsList = this.http.get('https://us-central1-onthespot-bfc6f.cloudfunctions.net/getSortedRestaurantsList')
    .map(data => data.json());
}

让我知道它是如何工作的！

于 2018-04-06T23:36:35.423 回答
0

在 subscribe 方法的范围内this已经改变，所以如果你需要调用父母this，你必须用不同的名字来定义它。尝试这个。

  let self=this;
    if (organizeby === "Most rating") {
         this.http.get('https://us-central1-onthespot-bfc6f.cloudfunctions.net/getSortedRestaurantsList')
           .subscribe((data) => {
                console.log('data', data.json());
                self.restaurantsList = data.json();
           })
        }
于 2018-04-06T18:23:25.893 回答