0

有人可以帮我从云火库中获取数据到离子列表吗？我使用 cloud firestore 模块化 SDK，angular 9 和 ionic 5。

我在 Cloud Firebase 上的收藏： 客户

我的界面 src/app/models/client/client.ts ：

export    interface client{
    
    name: string;
    phone: number;
    mensualite: number;
    zone: string;
    localisation: string;
    imp: number;
    net: number;
    abonnement: number;
  };

这是我的 src/app/tab1/tab1.page.html，我有一个离子列表：

<ion-header [translucent]="true">
  <ion-toolbar lines="none" color="danger">
    <ion-title >
      GESCABLE
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button routerLink="/newclient">
      <ion-icon  name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <ion-list>
    <ion-item *ngFor="let client of clientList" lines="none" button (click)='openClient()' >
      <ion-avatar slot="start">
        <img src="{{client.localisation}}" />
      </ion-avatar>
      <ion-label class="ion-text-wrap">
        <div class="line2">
          <h3><b>{{client.name}}</b></h3>
          <p>Imp: {{client.imp}} FCFA</p>
        </div>
        <div class="line2">
          <p>Zone A | Mens {{client.mensualite}} FCFA</p>
          <p><b>Net: {{client.net}} FCFA</b></p>
        </div>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

这是显示错误的我的 src/app/tab1/tab1.page.ts 文件：

import { Component, NgZone } from '@angular/core';
import { ClientPage } from '../client/client.page';
import { NewclientPage } from '../newclient/newclient.page';
import { client } from '../models/client';
import { AlertController, NavController } from '@ionic/angular';

import { getApp } from '@firebase/app';
import { getFirestore, collection, query, where, onSnapshot } from "firebase/firestore";

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  
  constructor(private navCtrl: NavController, private alertCtrl:AlertController) {}
  public search: string;
  public clientList: client[]:[];
  ngOnInit(){
    const firebaseApp=getApp();
    const db=getFirestore(firebaseApp);
    const q = query(collection(db,'clients')); 
    
    const unsubscribe = onSnapshot(q,(querySnapshot)=>{
      querySnapshot.forEach((doc)=>{
        this.clientList.push(doc.data());
        console.log(doc.id, " => ", doc.data());
      });
    });
  }
  
  openClient(){
    this.navCtrl.navigateForward("/client")
  }
  newClient(){
    this.navCtrl.navigateForward("/newclient")
  }
}

存储在 firestore 中的文档在检查器中正确显示，但数据未显示在 ion-list 中。这是显示的错误消息：

Uncaught TypeError: Cannot read properties of undefined (reading 'push') ```
4

1 回答 1

0

看起来你在这一行有错字 -

public clientList: client[]:[];

将其更改为 -

public clientList: client[] = [];
于 2021-09-18T05:41:29.667 回答