error TS2551 trying to get a simple value from parent loop to an <img> tag

January 1, 2022

I’ve been learning angular for a couple days now and I’m trying to recreate a partial copy of Instagram to train. But I’m facing a really simple issue that I have seen elsewhere a few times when looking for an answer -like this one – but none of them helped me.

My problem is the following:
I need to display a list of thumbnails throught a loop and give the image source a path to display the image, but I get: error TS2551: Property ‘post’ does not exist on type ‘ListComponent’. Did you mean ‘posts’?

My files now:
list.component.html:

<div class="list">
    <div class="wrapper">
        <div class="list-container">
            <div class="thumbnail" *ngFor="post of posts">
                <img src="{{post.image}}" alt="">
                <!-- or <img [src]="post.image">-->
            </div>
        </div>
    </div>
</div>

list.component.ts:

import { Component, OnInit } from '@angular/core';
import { Post } from 'src/app/models/post.model';
import { PostsListService } from 'src/app/services/posts-list.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {
  posts!: Post[];
  constructor(private postsList: PostsListService) { }

  ngOnInit(): void {
    this.posts = this.postsList.getPosts();
  }

}

and I get my datas from posts-list.service.ts:

import { Injectable } from '@angular/core';
import { postsData } from '../data';
import { Post } from '../models/post.model';

@Injectable({
  providedIn: 'root'
})
export class PostsListService {
  private posts!: Post[];
  constructor() { 
    this.posts = postsData;
  }

  getPosts(): Post[]{
    return this.posts;
  }

}

Maybe it’s an issue with the scope of the variable but since other people ahve been using it why couldn’t I ?

and just in case, here is my post model: post.model.ts:

export interface Post{
    id:number;
    userName: string;
    image: string;
    userImage: string;
    description: string;
    datePosted: Date;
    location: string;
    likesAmount: number;
}