使用Angular 6中的复选框过滤列表

<form>
  <label>
    <input type="checkbox" [(ngModel)]="filterValue"> Filter
  </label>
</form>

<ul>
  <li *ngFor="let item of itemList | filter: filterValue">{{ item }}</li>
</ul>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], filterValue: boolean): any[] {
    if (!items || !filterValue) {
      return items;
    }
    return items.filter(item => item.includes('filter'));
  }
}

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent {
  itemList: string[] = ['item 1', 'item 2', 'item 3'];
  filterValue: boolean = false;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ListComponent } from './list.component';
import { FilterPipe } from './filter.pipe';

@NgModule({
  declarations: [
    AppComponent,
    ListComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }