[SOLEVED BY MYSELF lol]How to show current data by "forEach" from firestore


#1

hello! everyone!
Now I have this issue on my app.I don’t know why get this error on console.
Please let me know why get this error and solutions.
Since the data is able to get on console, It might be an problem in html.


detail
25

and this is my tabsFeed.ts

  async getNewFeed(){
    try{
    this.postRef = this.afs.collection('post',ref => ref.orderBy("createdAt","desc").limit(30));
    this.post = this.postRef.ref.get().then(snapshot => {
      snapshot.forEach(doc => {
        this.posts = doc.data();
        console.log(this.posts);
      })
    })
  }catch(e){
     alert(e);
  }
}

and this is tabsFeed.html


  <ion-list>
    <ion-item *ngFor="let item of posts" >   //////  issue might be here
      <div class="relative">
        <img class="postImage" [src]="item.postImage" (click)="selectPost(item)">
      </div>

      <div *ngIf="item.petImage" class="absolutePetImage" (click)="navpostPetData(item)" >
        <ion-row>
          <img class="petImage" [src]="item.petImage">
          <p>{{ item.petName }}</p>
        </ion-row>
      </div>

      <div class="absolutes bg">
        <p text-right padding-right style="font-size: 10px; color:white;">{{ item.createdAt.toDate() | date: 'MM/dd/yyyy' }}</p>
        <p text-right class="count">{{'NICE'|translate}} {{ item.countHeart===null ? 0 : item.countHeart }} / {{'COMMENT'|translate}} {{ item.countComment===null ? 0 : item.countComment }}</p>
        <h5 class="contentText" text-wrap padding-left padding-right>{{ item.content | slice: 0 : 80  }}</h5>

        <ion-row class="profileRow" (click)="selectProfile(item)">
          <ion-col col-3>
              <img class="postIcon" [src]=" item.userIcon ">
          </ion-col>
          <ion-col col-9>
            <h2>{{ item.userName }}</h2>
            <p text-wrap class="status">{{ item.userStatus }}</p>
          </ion-col>
        </ion-row>
      </div>
    </ion-item>
  </ion-list>

#2

I mean this data do not get by observable or snapshotChanges . because this is post data.It should not get automatically.


#3
async getNewFeed(){
    const postData = [];
    try{
    this.postRef = this.afs.collection('post',ref => ref.orderBy("createdAt","desc").limit(30));
    this.post = this.postRef.ref.get().then(snapshot => {
      snapshot.forEach(doc => {
        this.posts = doc.data();
        postData.push(this.posts);  /// <- here
        this.postDatas = postData;
      })
    })
  }catch(e){
     alert('Something went wrong :' + e)
  }
}

this code is on ts.

<ion-item *ngFor="let item of postDatas  | orderBy:'createdAt' ">

and then I wrote this code on html.