использованиефильтровать / уточнять / искать результаты в API - PullRequest
Новая
       36

использованиефильтровать / уточнять / искать результаты в API

0 голосов
/ 09 ноября 2019

Попытка настроить вызов API и в настоящее время не может понять, как на самом деле это сделать. API подключен и запрашивает, так что полностью отработан. Я считаю, что код, который я набрал на restaurant.service.ts, верен, но у меня возникают проблемы с настройкой, где код, который у меня изначально отображает только список ресторанов, может быть превращен в новый список на основеусловия поиска, введенные пользователем.

Использование сервиса - restaurant.service и страницы с названием Dining

restaurant.service.ts 

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { map } from 'rxjs/operators';

export enum SearchType{
  all ='',
}

@Injectable({
  providedIn: 'root'
})
export class RestaurantsService {
  public restaurants= [];

  constructor( public http: HttpClient ) { }

//initial fetchRestaurants that loads on opening dining page
  fetchRestaurants() {
    console.log('fetching restaurants');
    let headers = {'content-type': 'application/json',
                    'accept': 'application/json',
                    'user-key': '7ae71880177b226bed309d0533717b4b'};
    let url = 'https://developers.zomato.com/api/v2.1/search?entity_id=757&entity_type=city&count=20'
    return this.http.get(url, {headers: headers}).pipe(tap(response => {
      console.log(response);
      this.restaurants = response['restaurants'];
      console.log(this.restaurants);
    }));
  }

  searchData(title: string, type: SearchType): Observable<any> {
    let headers = {'content-type': 'application/json',
                    'accept': 'application/json',
                    'user-key': '7ae71880177b226bed309d0533717b4b'};
    let url = 'https://developers.zomato.com/api/v2.1/search?entity_id=757&entity_type=city&count=20'
    return this.http.get('${this.url}?=${encodeURI(title)}').pipe(
      map(results => results['Search'])
    );
  }
}

Dining.page.html 

  <ion-toolbar>
    <ion-buttons slot='start'>
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Dining</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="searchChanged($event)" placeholder="Find Restaurants"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card class="welcome-card" *ngFor="let item of restaurantsService.restaurants">
    <img class='image' src='{{ item.restaurant.featured_image }}' alt='' />
    <ion-card-header>
      <ion-card-title class='text'>{{ item.restaurant.name }}</ion-card-title>
      <ion-card-subtitle class='text'>{{ item.restaurant.phone_numbers }}</ion-card-subtitle>
      <ion-card-subtitle class='text'>{{ item.restaurant.location.address }}</ion-card-subtitle>
    </ion-card-header>
  </ion-card>
</ion-content>

Dining.page.ts 

import { RestaurantsService } from '../services/restaurants.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-dining',
  templateUrl: './dining.page.html',
  styleUrls: ['./dining.page.scss'],
})
export class DiningPage implements OnInit {

  results: Observable<any>;
  searchTerm: string = '';
  type: SearchType = SearchType.all;

  constructor( private restaurantsService: RestaurantsService ) { }

  ngOnInit() {
  }

  searchChanges() {
    this.results = this.restaurantsService.searchData(this.searchTerm)
  }

  ionViewWillEnter() {
    this.restaurantsService.fetchRestaurants().subscribe();
  }


}
...