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

只需使用OR条件，

    <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>

Answer 2

您应该改为创建过滤器pipe。然后，您的过滤逻辑将从模板中提取出来，您可以根据需要在将来的修订版中对其进行扩展。不要忘记将其包含在declarations的{{1}}中。

Working StackBlitz

categoryFilterPipe.ts

@NgModule

html模板

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;
    }
}

角列表全部或按类别

2 个答案: