В Ioni c 5, как отобразить документ firestore на экране ioni c (html)

Question

Я получил документ из firestore, но не знаю, как отобразить этот массив на экране ioni c. Я пробовал код ниже.

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


}

Я получил ниже массив. это нормально, нет проблем.

Подробная страница. 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>

Но он ничего не показал на экране Ioni c и ошибка ниже

добро пожаловать, если кто может дать решение для этого.

Answer 1

с мистером Мостафа Харбом помогает, я решил ошибку. Здесь я только что изменил страницу 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);
    });
  }

}

Теперь у меня все работает нормально.