在 Ionic 5 中，如何将 firestore 文档显示到 ionic(html) 屏幕答案

【问题标题】：In Ionic 5, How to display firestore document to the ionic(html) screen在 Ionic 5 中，如何将 firestore 文档显示到 ionic(html) 屏幕
【发布时间】：2020-10-09 19:18:54
【问题描述】：

我已从 firestore 检索文档，但我不知道如何在离子屏幕上显示该数组。我试过下面的代码。

detail.page.ts

import { Component, OnInit } from '@angular/core';

import { FirestoreService } from '../../services/data/firestore.service';
import * as firebase from 'firebase';
import { from } from 'rxjs';
import { firebaseConfig } from '../../credentials';

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

  constructor(public firestoreService: FirestoreService, ) { }

  // tslint:disable-next-line: member-ordering
  detail: any;


  ngOnInit() {
  }
  async showData() {
    const db = firebase.firestore();
    const docRef = db.collection('srv').doc('Selected Items');
    // tslint:disable-next-line:member-ordering
    docRef.get().then((doc) => {
      const details = doc.data();

      if (doc.exists) {
        console.log('Document data:', doc.data());
        this.detail = details;
        console.log('document2', this.detail);

    } else {
        // doc.data() will be undefined in this case
        console.log('No such document!');
    }
    }).catch((error) => {
    console.log('Error getting document:', error);
    });
  }


}

我得到了以下数组。没问题。

detail.page.html

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

<ion-content>
  <ion-label><h1>Order page</h1></ion-label><ion-button (click)="showData()">check</ion-button><br><br>

 <ion-list><ion-item *ngFor="let da of detail['n']">
 <p>{{da.name}}</p>

 </ion-item></ion-list>


</ion-content>

但是，它没有在 Ionic 屏幕上显示任何内容并低于错误

欢迎，如果有人可以提供解决方案。

【问题讨论】：

首先需要将检索到的数据设置在 detail 变量中，并且在 const detail = doc.data(); 下 if doc.exists 里面设置在此处添加 this.detail = detail;
我试过你说的“this.detail = detail;”但它显示此错误“获取文档时出错：TypeError：无法设置未定义的属性'detail'”
docRef.get().then((doc) => {... this.detail = detail as any;...}
它显示这个“找不到名称'detail'。你的意思是实例成员'this.detail'吗？”
no detail 是 const detail 的参考，在其下添加。

标签： javascript arrays angularjs ionic-framework google-cloud-firestore

【解决方案1】：

在 Mostafa Harb 先生的帮助下，我已经解决了这个错误。在这里，我之前所做的只是更改了 detail.page.ts 页面。下面给出

import { Component, OnInit } from '@angular/core';

import { FirestoreService } from '../../services/data/firestore.service';
import * as firebase from 'firebase';
import { from } from 'rxjs';
import { firebaseConfig } from '../../credentials';

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

  constructor(public firestoreService: FirestoreService, ) { }

  // tslint:disable-next-line: member-ordering
  detail: any;
  detail1: any;

 


  ngOnInit() {
  }
  async showData() {
    const db = firebase.firestore();
    const docRef = db.collection('srv').doc('Selected Items');
    // tslint:disable-next-line:member-ordering
    docRef.get().then((doc) => {
      const details = doc.data();

      if (doc.exists) {
        console.log('Document data:', doc.data());
        this.detail = details;
        console.log('document2', this.detail);
        this.detail1 =this.detail['n'];
        console.log('document3', this.detail['n']);

    } else {
        // doc.data() will be undefined in this case
        console.log('No such document!');
    }
    }).catch((error) => {
    console.log('Error getting document:', error);
    });
  }

}

现在，它对我来说很好。

【讨论】：