在ionic 4应用中按ID显示胶片的详细信息

时间:2019-02-15 08:06:32

标签: ionic3 angular6 angular7 ionic4

嗨,我有一个应用ionic 4的电影应用程序,我想当我单击其中一部电影时,它必须提供该电影的详细信息,我将列表存储在firestore中,这里是我数据库的照片 this is my firestore database

我试图获取电影的ID,并将其传递到详细信息页面,然后尝试获取数据,但我失败了,请帮助我

这是我的代码: films.page.html

<ion-content padding>
        <ion-item *ngFor=" let count of data">
          <h5>{{count.title}}<button  [routerLink]="['detail/', count.id]">click for details</button>

            <img src="{{count.image}}">
          </h5>

        </ion-item>

film-details.page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import {Observable} from 'rxjs';
import { Router } from '@angular/router';

@Component({
  selector: 'app-film-details',
  templateUrl: './film-details.page.html',
  styleUrls: ['./film-details.page.scss'],
})
export class FilmDetailsPage implements OnInit {
  id;

  constructor(private router: ActivatedRoute, public afs: AngularFirestore) { }

  ngOnInit() {
    this.id = this.router.snapshot.paramMap.get('id');
    console.log(this.id);
  }
  getfilmDetail(id: string): AngularFirestoreDocument<123> {
    return this.afs.collection('123').doc(this.id);
  }
}

film-details.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>filmDetails</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="getfilmDetail()"></ion-button>

</ion-content>

0 个答案:

没有答案