Having issue showing data on html page

The Data is successfully recieved on console

The function through which I am getting data from firestore
getmessages() {

this.firestore

  .collection("chats", (ref) => ref.where("secondUser", "==", this.userData.userID).where("userID", "==", this.Id))

  .valueChanges()

  .subscribe((res) => {

    this.mesagedata = res;

    console.log("data in mesagedata", this.mesagedata);

         

     for(var j=this.mesagedata.length;j<this.mesagedata.messages[j];j++){

       console.log("msgs",this.mesagedata.messages[j]);

       

     }

    

  });

}
The Html code

<div *ngFor="let item of mesagedata.messages">

  <div class="card2">

  

  </div>

</div>

<div *ngFor="let msgs of mesagedata.messages">

  <div class="card2">

    <ion-item>{{msgs.Chat}}</ion-item>

  </div>

</div>
Msgs should be display but they are not need help

I think you have timing problem. Looks like the data is coming from Firebase, so it is async data. But I think your template is configured to refresh properly once the data is there.

To add to what @ChrisGriiffith is saying, please add the following to the compilerOptions stanza of your tsconfig.json:

    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true

That last one in particular should help you catch bugs like this before they ever happen, by reminding you to properly initialize all controller properties. It’s especially important to do this for things referenced in templates.

CAn yuhelp me out I need to check one data in two fields
example:
database:
userID:abc
secondUser:def
I need to get the doc where def exists but i donnot know whether it is at userID or secondUser,I tried a way by creating an array participants and use arraycontain but data in stored against some variable so cant use that if somehow I may know how to store data at array indexes without a variable or how to check def in both userID and secondUser So my work will be done
Thanking in anticipation

Hi there can anyone help me out I need to check one data in two fields
example:
database:
userID:abc
secondUser:def
I need to get the doc where def exists but i donnot know whether it is at userID or secondUser,I tried a way by creating an array participants and use arraycontain but data in stored against some variable so cant use that if somehow I may know how to store data at array indexes without a variable or how to check def in both userID and secondUser So my work will be done
Thanking in anticipation

So you took my advice, added that stuff to your tsconfig.json, and got rid of all the ensuing build errors. What does the code look like now, then?

I changed the html code too to make it an inbox but now the problem is that by using ngfor only 1 index of array is shown i mean to say there are 2 other docs too which are not shown let me show you html and ts code
Html

<ion-title>Chats</ion-title>
<ion-card>

  <ion-item>

    <ion-row>

      <ion-col col-100 style="height: 4em;">

        <ion-avatar><img src="{{item.imageURL}}" alt="" style="height: 3em;"/></ion-avatar>

      </ion-col>

      <ion-col col-10 style="position: absolute; left: 20%; font-weight: bold;">

        <ion-label>{{item.firstname}}</ion-label>

      </ion-col>

      <ion-col col-10 style="position: absolute; left: 18%; top: 50%;">

        <ion-label>def</ion-label>

      </ion-col>

    </ion-row>

  </ion-item>

 </ion-card>

No previous chats

Ts code
import { Component, OnInit } from “@angular/core”;

import { AngularFirestore } from “angularfire2/firestore”;

import { AngularFireAuth } from “angularfire2/auth”;

@Component({

selector: “app-aboutus”,

templateUrl: “./aboutus.page.html”,

styleUrls: ["./aboutus.page.scss"],

})

export class AboutusPage implements OnInit {

constructor(private firestore: AngularFirestore, private firebaseAuth: AngularFireAuth) {

}

mesagedata: any;

Id: string;

Data: any;

userData: any;

inbox: any;

index: number;

temp;

res1: any;

res2: any;

ava;

sortData() {

for (var i = 0; i < this.inbox.length; i++) {

  this.index = i;

  for (var k = i + 1; k < this.inbox.length; k++) {

    if (this.inbox[k].lastUpdate > this.inbox[i].lastUpdate) {

      this.index = k;

    }

  }

  this.temp = this.inbox[i];

  this.inbox[i] = this.inbox[this.index];

  this.inbox[this.index] = this.temp;

}

}

ngOnInit() {

}

ionViewWillEnter() {

this.Id = this.firebaseAuth.auth.currentUser.uid;

this.firestore.collection("chats", ref => ref.where("userID", "==", this.Id)).valueChanges().subscribe(res1 => {

  this.res1 = res1;

  console.log("RES1 =", this.res1);

  for (let i = 0; i < this.res1.length; i++) {

    this.firestore.collection('usersdata').doc(this.res1[i].userID).valueChanges()

      .subscribe(ava => {

        this.ava = ava;

        this.res1[i].imageURL = this.ava.imageURL;

        this.res1[i].firstname = this.ava.firstname;

        this.res1[i].lastname = this.ava.lastname;

        this.res1[i].userID = this.ava.userID;

      })

  }

})

this.firestore.collection("chats", ref => ref.where("secondUser", "==", this.Id)).valueChanges().subscribe(res2 => {

  this.res2 = res2;

  console.log("RES2 =", this.res2);

  for (let i = 0; i < this.res2.length; i++) {

    this.firestore.collection('usersdata').doc(this.res2[i].secondUser).valueChanges()

      .subscribe(ava => {

        this.ava = ava;

        this.res2[i].imageURL = this.ava.imageURL;

        this.res2[i].firstname = this.ava.firstname;

        this.res2[i].lastname = this.ava.lastname;

        this.res2[i].userID = this.ava.userID;

      })

  }

  this.inbox = [ ...this.res1, ...this.res2];//...=>The spread operator

 

  this.sortData();

  console.log("INBOX =", this.inbox);

  console.log("IOn View will entered");

})

}

}

I have an extremely hard time believing that you followed my earlier advice, because you have a boatload of uninitialized properties. Other things that need attention:

  • give everything proper types, instead of abusing any;
  • format your code properly when posting, like so:
fenced off by triple backticks
  • don’t rely on lifecycle events to manage data freshness, see this post;
  • get all of the firebase stuff out of pages and into services. pages should neither know nor care how information is actually fetched and stored;
  • never use var: always let instead;
  • write asynchronous code using functional programming style, which means eliminating all the writes to external state like res1 and res2. communicate strictly using function parameters and return values

I followed your advice but the compiler was checking for minor minor errors objects were shown as null so i removed them also the code i pasted above the using is in ngfor data is shown in console and it is same as was supposed to be but dont know what is wrong with ngfor it is not working as supposed to work

I don’t think they’re minor. When you leave controller properties that are referenced by templates undefined, you cause uncaught exceptions. This is responsible for a large number of the “help my app just shows a white screen when I install it on a phone” threads.

But it’s your project, so you’re in charge. I expect somebody else will be along shortly to continue the discussion, but I’m done here.

Ammm I am a beginner, And there was a logical error in the above code by the way thankyou some much for your advices I will try to sort those errors out

can you please help me with that