Angular 无法读取属性'；文件'；未定义的

我试图查询存储在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>

Datacriaco:{{data.datacriaco}}
数据更新：{{data.DataUpdate}

DELETADO:{{data.DELETADO}

电子邮件：{{data.Usuario.Documento.EMAIL}

ID:{{data.Usuario.Documento.ID}

NOME:{{data.Usuario.Documento.NOME}

SENHA:{{data.Usuario.Documento.SENHA}

TELEFONE:{{data.Usuario.Documento.TELEFONE}

数据是我的迭代数据，Usuario是我的集合，Documento是我存储在firestore中的对象，其他一切都只是字段值

---

您可以使用

*ngIf

或

安全导航操作符（？）

处理此错误

原因

：在组件上设置实际值之前，尝试访问模板中的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>

Datacriaco:{{data？.datacriaco}}
数据更新：{{data？.DataUpdate}

DELETADO:{{data？.DELETADO}}

电子邮件：{{data？.Usuario？.Documento？.EMAIL}

ID:{{data？.Usuario？.Documento？.ID}

NOME:{{data？.Usuario？.Documento？.NOME}

SENHA:{{data？.Usuario？.Documento？.SENHA}}

TELEFONE:{{数据？.Usuario？.Documento？.TELEFONE}}

您可以使用

*ngIf

或

安全导航操作员（？）

处理此错误

原因

：在组件上设置实际值之前，尝试访问模板中的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>

Datacriaco:{{data？.datacriaco}}
数据更新：{{data？.DataUpdate}

DELETADO:{{data？.DELETADO}}

电子邮件：{{data？.Usuario？.Documento？.EMAIL}

ID:{{data？.Usuario？.Documento？.ID}

NOME:{{data？.Usuario？.Documento？.NOME}

SENHA:{{data？.Usuario？.Documento？.SENHA}}

TELEFONE:{{数据？.Usuario？.Documento？.TELEFONE}}

一个更干净的方法是检查

数据是否存在，而不是使用这么多
安全（？）
操作符。大概是这样的：

<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>

更干净的方法是检查
数据是否存在，而不是使用这么多
安全（？）
操作符。大概是这样的：

<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>

它成功地删除了所有错误，唯一的问题是它没有显示我的数据：你不必解析数据，它应该是一个JSON this.dataJSON=auxString；又救了我一天，伙计！它成功地删除了所有错误，唯一的问题是它没有显示我的数据：你不必解析数据，它应该是一个JSON this.dataJSON=auxString；又救了我一天，伙计！即使数据存在，嵌套对象也会失败，我在回答中确实提到过。即使数据存在，嵌套对象也会失败，我在回答中确实提到过。我认为您没有正确引用数据。您已经创建了一个带有“id”和“documento”的对象数组，其中“documento”包含数据，但您引用的是诸如“Usuario”之类的东西，而这些东西在对象上并不存在。也许像，
data.documento.documento
这样的东西会给你一个更好的结果？这是一个非常好的观察结果，我使用的通常不是documento，成功地修复了它！伙计，我认为你没有正确引用你的数据。您已经创建了一个带有“id”和“documento”的对象数组，其中“documento”包含数据，但您引用的是诸如“Usuario”之类的东西，而这些东西在对象上并不存在。也许像，
data.documento.documento
这样的东西会给你一个更好的结果？这是一个非常好的观察结果，我使用的通常不是documento，成功地修复了它！很荣幸，伙计。