使用角度管道2在列表内的列表中搜索

list = [
  { name: 'John', age: 25, hobbies: ['reading', 'swimming'] },
  { name: 'Jane', age: 30, hobbies: ['running', 'painting'] },
  { name: 'Bob', age: 35, hobbies: ['cooking', 'gardening'] }
];

<input type="text" [(ngModel)]="searchKeyword" placeholder="Search">

<ul>
  <li *ngFor="let item of list | searchPipe: searchKeyword">
    {{ item.name }} ({{ item.age }} years old)
    <ul>
      <li *ngFor="let hobby of item.hobbies">{{ hobby }}</li>
    </ul>
  </li>
</ul>

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

@Pipe({
  name: 'searchPipe'
})
export class SearchPipe implements PipeTransform {
  transform(list: any[], keyword: string): any[] {
    if (!keyword) {
      return list;
    }
    keyword = keyword.toLowerCase();
    return list.filter(item => {
      return item.name.toLowerCase().includes(keyword) ||
             item.age.toString().includes(keyword) ||
             item.hobbies.some(hobby => hobby.toLowerCase().includes(keyword));
    });
  }
}

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

import { AppComponent } from './app.component';
import { SearchPipe } from './search.pipe';

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