Question

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

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>

Answer 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());
}

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

Answer 2

在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();
           })
        }

将http响应分配给Observable

2 个答案: