TS2551: Property 'post' does not exist on type 'PostListComponent'

Issue

I’ve read answers but I’m stuck… I’m trying to remove a post with the action of a click. I’ve created all the methods but I have this error in my post-list-component.html when I add post as argument on the onDeletePost() method : TS2551: Property ‘post’ does not exist on type ‘PostListComponent’. Did you mean ‘posts’? And if I put posts I’ve another error message(TS2345)…
Let me know if you need more informations, thank you very much !!

Here is my posts.service.ts :

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

@Injectable()
export class PostsService {


  posts : Post[] = [];
  postsSubject = new Subject<any[]>();

  emitPosts() {
      this.postsSubject.next(this.posts);
    }

  createNewPost(newPost : Post) {
    this.posts.push(newPost);
    this.emitPosts();
  }

  removePost(post : Post) {
    const postIndexToRemove = this.posts.findIndex(
      (postEl) => {
        if(postEl === post) {
          return true;
        } else {
          return ' '
        }
      }
    );
    this.posts.splice(postIndexToRemove, 1);
    this.emitPosts();
  }
}

post-list-component.ts :

import { Component, OnInit, Input, Output, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { Post } from '../models/post.model';
import { PostsService } from '../services/posts.service';


@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit, OnDestroy {
  
  posts : Post[];
  postsSubscription: Subscription;

  constructor(private postsService: PostsService,
              private router: Router) { }

  ngOnInit(): void {
    this.postsSubscription = this.postsService.postsSubject.subscribe(
      (posts: Post[]) => {
        this.posts = posts;
      }
    );
    this.postsService.emitPosts()
  }


  onDeletePost(post: Post) {
    this.postsService.removePost(post);
  }

  ngOnDestroy() {
    this.postsSubscription.unsubscribe();
  }
}

and my post-list-component.html :

<li class="list-group-item">
  <button class="btn btn-warning" (click)="onDeletePost(post)"> Supprimer </button>
</li>

Solution

The problem seems to be in your html, as watching your snippet. I would change the html code to

<ng-container *ngFor="let post of posts">
    <li class="list-group-item">
      <button class="btn btn-warning" (click)="onDeletePost(post)"> Supprimer </button>
    </li>
</ng-container>

What caused the error?

Basically you have an array of posts that you want to be displayed in your page. In order to do that, you need to cycle that array post per post.

*ngFor="let post of posts"

Does that, creating a reference of a post for each iteration.

So for Example if you have the posts’s array having 3 post, the ngFor will cycle that array three times.

Inside the ngFor you can now pass post to the function onDeletePost.

More about *ngFor here

Answered By – Jacopo Sciampi

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0