Угловой список все или по категории

Question

books=[{
    title:"Life is good",
    author:"benny",
    category:"life"
    },{
    title:'Canned in',
    author:"francis",
    category:"style"
  }];

<ng-container *ngFor="let book of books">
 <div *ngIf="book.category == cat">
  <h3>{{book.title}}</h3>
  <h4>{{book.author}}</h4>
 </div>
</ng-container>

У меня есть рабочий код ... он отображает элемент с категорией, но я хочу отобразить все элементы, не проверяющие категорию, когда cat==all Я не хочу дублировать этот код

<div *ngIf="book.category == cat">
 <h3>{{book.title}}</h3>
 <h4>{{book.author}}</h4>
</div>

, чтобы получить все элементы, но лучше реализовать некоторую логику в том же самом div, чтобы иметь все опции в нем.

Как: все, имя категории, имя категории ...

Answer 1

Вам следует создать фильтр pipe .Тогда ваша логика фильтрации абстрагируется от шаблона, и вы можете расширить ее, как считаете нужным в будущих ревизиях.Не забудьте включить его в свой declarations в @NgModule.

Рабочий StackBlitz

categoryFilterPipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'categoryFilter',
    pure: false
})
export class CategoryFilterPipe implements PipeTransform {
    transform(books: {category:string}[], category:string): any {

        return (category && category !== 'all')
            ? books.filter(_ => _.category === category)
            : books;
    }
}

HTML-шаблон

<div *ngFor="let book of books | categoryFilter : cat">
  <h3>{{book.title}}</h3>
  <h4>{{book.author}}</h4>
</div>

Answer 2

Просто используйте условие ИЛИ,

    <ng-container *ngFor="let book of books">
        <div *ngIf="cat=='all' || book.category==cat">
            <h3>{{book.title}}</h3>
            <h4>{{book.author}}</h4>
        </div>
    </ng-container>