Question

我正在尝试查询存储在我的Firestore数据库中的对象，并且这样做是使用json格式遍历该对象并将其显示在HTML上。最初，我能够在控制台日志上显示，但是刷新页面后，我开始在Google chrome开发者控制台上收到错误消息。

这是我的尝试方式

constructor(public navCtrl: NavController,
    public alertCtrl: AlertController) {
    let db = firebase.firestore();
    var auxint = 0;
    this.dataAux
    let auxString = '[';
    db.collection('Usuario').where("Deletado", "==", false).get().then(res => {
      res.forEach(item => {

        //pegue todos os dados do banco e crie um novo JSON com as informações de 
        auxint++;
        auxString += '{"id":"' + item.id + '","documento":' + JSON.stringify(item.data()) + '}';

        if (res.size != auxint)
          auxString += ', ';
      })
      auxString += ']';
      this.dataJSON = JSON.parse(auxString);

    }).catch(err => {
      console.log('algum erro ' + err);
    });
  }

Usuario是我的收藏名称。

我的.html文件

<ion-item-sliding *ngFor="let data of dataJSON">
  <ion-item>
    <h3>DataCriacao: {{data.DataCriacao}}</h3>
    <p>DataUpdate: {{data.DataUpdate}}</p>
    <p>DELETADO: {{data.Deletado}}</p>
    <p>EMAIL: {{data.Usuario.Documento.email}}</p>
    <p>ID: {{data.Usuario.Documento.id}}</p>
    <p>NOME: {{data.Usuario.Documento.nome}}</p>
    <p>SENHA: {{data.Usuario.Documento.senha}}</p>
    <p>TELEFONE: {{data.Usuario.Documento.telefone}}</p>
  </ion-item>
  <ion-item-options>

数据是我的迭代数据，Usuario是我的集合，Documento是我存储在firestore中的对象，其他所有内容都只是字段值。

https://imgur.com/a/HHmZDpZ

Answer 1

您可以使用 *ngIf 或 safe navigation operator (?) 解决此错误。

Reason ：这只是在您在组件上设置实际值之前尝试访问模板中的dataJSON时发生的控制台错误。发生这种情况是因为数据是异步分配的。

解决方案：

<ion-item-sliding *ngFor="let data of dataJSON">
  <ion-item>
    <h3>DataCriacao: {{data?.DataCriacao}}</h3>
    <p>DataUpdate: {{data?.DataUpdate}}</p>
    <p>DELETADO: {{data?.Deletado}}</p>
    <p>EMAIL: {{data?.Usuario?.Documento?.email}}</p>
    <p>ID: {{data?.Usuario?.Documento?.id}}</p>
    <p>NOME: {{data?.Usuario?.Documento?.nome}}</p>
    <p>SENHA: {{data?.Usuario?.Documento?.senha}}</p>
    <p>TELEFONE: {{data?.Usuario?.Documento?.telefone}}</p>
  </ion-item>
  <ion-item-options>

Answer 2

一种更清洁的方法是检查data是否存在，而不是使用这么多的safe( ? )运算符。像这样：

<ion-item-sliding *ngFor="let data of dataJSON">
  <ion-item *ngIf="data">
    <h3>DataCriacao: {{data.DataCriacao}}</h3>
    <p>DataUpdate: {{data.DataUpdate}}</p>
    <p>DELETADO: {{data.Deletado}}</p>
    <p>EMAIL: {{data.Usuario.Documento.email}}</p>
    <p>ID: {{data.Usuario.Documento.id}}</p>
    <p>NOME: {{data.Usuario.Documento.nome}}</p>
    <p>SENHA: {{data.Usuario.Documento.senha}}</p>
    <p>TELEFONE: {{data.Usuario.Documento.telefone}}</p>
  </ion-item>
<ion-item-options>

此外，在TypeScript类中，您可以使用模板字符串语法：

constructor(public navCtrl: NavController,
  public alertCtrl: AlertController) {
  let db = firebase.firestore();
  var auxint = 0;
  this.dataAux
  let auxString = '[';
  db.collection('Usuario').where("Deletado", "==", false).get().then(res => {
    res.forEach(item => {

      //pegue todos os dados do banco e crie um novo JSON com as informações de 
      auxint++;
      auxString += `{"id":"${item.id}","documento":${JSON.stringify(item.data())}}`;

      if (res.size != auxint)
        auxString += ', ';
    })
    auxString += ']';
    this.dataJSON = JSON.parse(auxString);

  }).catch(err => {
    console.log('algum erro ' + err);
  });
}

无法读取未定义的属性“ Documento”

2 个答案: