Question

我试图将其设置为当用户“点击”每个餐厅的卡片时，它将打开一个页面（selected-card.page），在该页面上可以找到其他详细信息（菜单，价格等）。我不太确定如何完成此操作，目前正在尝试使用服务中的函数来调用API以显示该餐厅。

我知道，如果您有指南或教程可以随时将其发送给我，我可能还远远没有完成。感谢您的帮助！

dining.page.html（带有可单击以访问更多详细信息的卡片的页面）

  <ion-card (click)="onSelected(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 { ModalController } from '@ionic/angular';
import { RestaurantsService } from '../services/restaurants.service';
import { Observable } from 'rxjs';
import { SelectedCardPage } from '../selected-card/selected-card.page';

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

  constructor( private restaurantsService: RestaurantsService,
               public modalCtrl: ModalController ) { };

  ngOnInit() {}

  async onSelected(card) {
      const modal = await this.modalCtrl.create({
        component: SelectedCardPage,
        componentProps: { value: card }
      });
      return await modal.present();
  }

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


}

selected-card.page.html

<ion-content>
  <ion-card (click)="dismiss()" 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>

selected-card.page.ts

import { ModalController, NavParams } from '@ionic/angular';
import { RestaurantsService } from '../services/restaurants.service';

@Component({
  selector: 'app-selected-card',
  templateUrl: './selected-card.page.html',
  styleUrls: ['./selected-card.page.scss'],
})
export class SelectedCardPage implements OnInit {
  value: string;
  constructor(private restaurantsService: RestaurantsService,
              private modalCtrl: ModalController,
              private navParams: NavParams) { }

  ngOnInit() {
  }

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

  ionViewDidLoad() {
    this.value = this.navParams.get('value');
  }

  dismiss() {
    this.modalCtrl.dismiss();
  }

}

restaurant.service.ts

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

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

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

  // used to obtain information/details on a restaurant when selected
  fetchRestaurantDetails() {
    console.log('getting restaurant details');
    let headers = {'content-type': 'application/json',
                    'accept': 'application/json',
                    'user-key': '7ae71880177b226bed309d0533717b4b'};
    let url = 'https://developers.zomato.com/api/v2.1/reviews?res_id=17266091'
    return this.http.get(url, {headers: headers}).pipe(tap(response => {
      console.log(response);
      this.restaurants = response['restaurants'];
      console.log(this.restaurants);
    }));
  }
}

Answer 1

您没有将数据发送到“餐厅详细信息”页面（SelectedCardPage）。您的点击函数传递了“卡片”，但不存在具有该名称的变量或对象。使用“ item”，因为您的For循环通过名称“ item”引用每个餐厅您的代码：

<ion-card (click)="onSelected(card)" class="welcome-card" *ngFor="let item of restaurantsService.restaurants">

更改：

<ion-card (click)="onSelected(item)" class="welcome-card" *ngFor="let item of restaurantsService.restaurants">

现在，在您的SelectedCardPage模板中，您可以显示每个餐厅项目持有的数据。

<ion-content>
  <ion-card (click)="dismiss()" class="welcome-card">
    <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>

Answer 2

由于您要使整个卡片都可点击，并且正在对其进行循环以绑定详细信息。

 <ion-card (click)="onSelected(card)" class="welcome-card" *ngFor="let item of 
restaurantsService.restaurants">

错误：

 <ion-card (click)="onSelected(item)" class="welcome-card" *ngFor="let item of 
restaurantsService.restaurants">

您需要在点击功能中传递“ item”。正确：

.bash_profile

使用离子卡在第二页上显示API的信息

2 个答案: