将 http 响应分配给 Observable

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

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

Answer 2

因为您正在使用 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());
}

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

将 http 响应分配给 Observable

Assign http response to Observable

observable

firebase

angular-http

ionic3

angular-observable