Angular Cannot read properties of undefined (reading 'heartType')

Question

Hi I'm trying to create a social network and i'm doing the like and dislike function, to display the like/dislike i'm using a changing his class to change the apparance of the like and i'm creating an array of strings to set the value of it by defining its name. I get my posts object where i have all the posts of the Database and also has a property to see if the post has been liked and i'm trying to set that property into the array of strings to define the name of the icon but i don't know why i get this error when i try to set something inside the .suscribe method i researched but i didn't find any solutions. This is the full error core.mjs:6485 ERROR TypeError: Cannot read properties of undefined (reading 'heartType')

export class HomePage implements AfterViewInit{
  @ViewChild(IonSlides) slides: IonSlides;
  public didInit: boolean = false;

  constructor(private http:HttpClient, private auth:AuthenticationService, private router:Router) {
  }

  public load: boolean = false;
  posts:any;
  heartType:Array<any> = [];

  ngOnInit():void{
    this.auth.status().subscribe((res)=>{
      console.log(res);
    });
    this.auth.posts().subscribe((res)=>{
      this.posts = res;
      this.posts.forEach(function(value,key){
        this.heartType[key]=value.post_like;
      });
      console.log(this.posts);
    }, (err) =>{
      console.log(err);
    })
    this.load = true;
  }

And the view

<ion-content>
  <ion-slides *ngIf="load" (ionSlideDidChange)="slideChanged()" [options]="slideOpts">
    <ion-slide *ngFor="let post of posts">
      <div class="video-box">
        <video [id]="post.id" loop="true" preload="auto"
          webkit-playsinline="playsinline" class="videoPlayer">
           <source src="{{post.description}}" type="video/mp4" />
        </video>
        <h3 class="title">{{post.title}} <ion-icon name="checkmark"></ion-icon></h3>
        <p class="description">What's your favorite dance? #dance</p>
        <div class="song">
          <ion-icon name="musical-notes"></ion-icon>
          <div class="scroll-text">
            <p>Original sound - Pink</p>
          </div>
        </div>
        <div class="button-box">
          <div class="avatar-box">
            <ion-avatar><img src="../../assets/photo-profil-1.jpeg"></ion-avatar>
            <ion-badge><ion-icon name="add"></ion-icon></ion-badge>
          </div>
          <div class="icon-box">
            <button (click)="check_like(post.id)" style="background-color: transparent;">
              <ion-icon [name]="heartType[post.id]"></ion-icon>
              <!--<ion-icon *ngIf="!post.post_like"[id]="like[post.id]" name="heart-outline"></ion-icon>-->
           </button>
           <p>82k</p>
          </div>
          <div class="icon-box">
            <ion-icon name="chatbubble-ellipses-sharp"></ion-icon>
            <p>892</p>
          </div>
          <div class="icon-box">
            <ion-icon name="arrow-redo-sharp"></ion-icon>
            <p>689</p>
          </div>
          <div class="avatar-box-2">
            <ion-avatar><img src="../../assets/photo-profil-2.png"></ion-avatar>
          </div>
          <img src="../../assets/music-note.gif" class="gif-music">
        </div>
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

Use an arrow function as your `.forEach()` callback. (So use `this.posts.forEach((value, key) => {` instead of `this.posts.forEach(function(value,key){`). — Ivar, Apr 25 '22 at 12:24
Thank you so mutch buddy i was struggling alot searching and i though it was something about the Observable of the .suscribe Thank You!!!!! — Oriol Costa, Apr 25 '22 at 14:31

Angular Cannot read properties of undefined (reading 'heartType')

0 Answers0