Угловая 4 фильтрация при нажатии кнопки

Question

Я новичок в Angular 4, в настоящее время есть список данных без фильтрации, а слева я дал список категорий.Таким образом, когда любой пользователь нажимает на любую из категорий, список должен быть отфильтрован.Пожалуйста, дайте мне знать, как я могу это сделать?

xyz.component.html

<li *ngFor="let category of categories; let i=index;" (click)="filter(0,category.id)">{{ category.name }}</li>
<div  *ngFor="let post of originalPosts; let i = index">
  <div *ngIf="!post.blogger.team_link">
      {{post.blogger.name}}
 </div>
</div>

xyz.component.ts

  export class BlogComponent implements OnInit {
        filteredPosts=[];
        originalPosts=[];

        constructor(private blogService: BlogService) { 
          this.blogService.getBlogPosts().then(res=>this.originalPosts=res);
        }
        public filter(bgr, cat){
          if(cat != null){
            let category = this.categories[cat]
            this.filteredPosts = this.originalPosts.filter(d => d.category.id == cat);
          }
        }
    }

Токовый выход, который отображает все категории Токовый выход

Ожидаемый выход, который должен отображать только выбранную категорию, например.Автор Ожидаемый вывод

Невозможно отфильтровать?

Answer 1

Сделайте это

<li *ngFor="let category of categories; let i=index;" (click)="filter(category.id)">{{ category.name }}</li>

компонент

originalPosts = []; // add all posts
filteredPosts = [];

public filter(categoryId){  
    this.filteredPosts = this.originalPosts.filter(post => post.category.id === categoryId;
}