Не удается прочитать свойство 'Documento' из неопределенного - PullRequest
Новая
       8

Не удается прочитать свойство 'Documento' из неопределенного

0 голосов
/ 16 сентября 2018

Я пытаюсь сделать запрос к объекту, который хранится в моей базе данных 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>

data - это мои итерационные данные, Usuario - моя коллекция, а Documento - мой объект, хранящийся в firestore, все остальное простозначения полей.

https://imgur.com/a/HHmZDpZ

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Более понятный подход заключается в проверке, существует ли 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);
  });
}
0 голосов
/ 16 сентября 2018

Вы можете устранить эту ошибку, используя *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>
...